Event unbinding in AngularJS

Question

I'm very new to both angular and MVC programming so im not sure if im doing this correctly.

I have a jquery snippet I wanna use one some of my partials both not all of them. But since the event listeners never expire due the page never reloading I was wondering how I would register my events, listen to them and destroy them the angular way sort of speak.

I read somewhere you should use $scope.on but I don't really understand how it works.

Example

app.controller('PageCtrl', function ($scope, $location, $http) {

  // jQuery to collapse the navbar on scroll
  $(window).on( "scroll", function() {
  if ($(".navbar").offset().top > 50) {
      $(".navbar-fixed-top").addClass("top-nav-collapse");
      $(".logotype-white").addClass("logotype-hide");
      $(".logotype-grey").removeClass("logotype-hide");
  } else {
      $(".navbar-fixed-top").removeClass("top-nav-collapse");
      $(".logotype-white").removeClass("logotype-hide");
      $(".logotype-grey").addClass("logotype-hide");
  }
});

app.controller('OtherCtrl', function (/* $scope, $location, $http */) {
$(function() {
      $(".navbar-fixed-top").addClass("top-nav-collapse");
      $(".logotype-white").addClass("logotype-hide");
      $(".logotype-grey").removeClass("logotype-hide");
});

A friend of mine suggested I should use namespaces and just unbind all my events but that's not the angular way I guess?

Have you seen http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background/15012542 ? — Benjamin Gruenbaum, Apr 15 '15 at 09:25
Yeah I read that through and I realize I probably shouldn't be using jquery in the first place but I don't know how I would rewrite that jquery snippet to angular. — andromedainiative, Apr 15 '15 at 09:36

score 1 · Accepted Answer · answered Apr 15 '15 at 10:04

In order to achieve this in angularjs, you need the use of ng-class directive to toggle class, and to listen to the window scroll event within your controller.

Here is a similar demo:

angular.module('myApp', [])
  .controller('MyCtrl', function($scope, $window) {

    $scope.currWindowScroll = 0;

    angular.element($window).bind('scroll', function() {
      $scope.currWindowScroll = $window.scrollY;
      $scope.$apply();
    });

  });

.fixed {
  position: fixed;
  padding: 30px 10px;
}
.fixed div {
  padding: 10px;
  width: 300px;
  margin: 10px auto;
  background-color: yellow;
}
.red {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" style="height: 1500px">
  <div ng-controller="MyCtrl">
    <div class="fixed">
      <div ng-class="{ 'red' : currWindowScroll > 500 }">
        This has red background if scroll > 500</div>
    </div>
  </div>
</div>

Thank you so much this seems to be exactly what I was looking for. I was thinking that the answer somehow would relate to creating my own directive but I couldn't find a good example of someone using the scroll event in a directive. — andromedainiative, Apr 15 '15 at 10:08
Basically, you only use a custom directive if you have to modify the DOM. Since you only need to listen to window scroll, ng directives might suffice. — qtgye, Apr 15 '15 at 10:12

Event unbinding in AngularJS

1 Answers1