AngularJS - Unbind $window of an event from specific directive

Question

Inside one of my directives, I use angular.element($window).bind(\'scroll\'). When the directive is destroyed, I then want to unbind it. Normally,

Answer 1

bind:

$window.onscroll = function() {
//your code
};

unbind:

$scope.$on('$destroy', function () {
     $window.onscroll = undefined;
});

Answer 2

Pass the same function reference to unbind/off as you pass to bind/on to unbind just that particular handler:

var fn = function () {};

angular.element($window).on('scroll', fn);

angular.element($window).off('scroll', fn);

For example:

var onScrollAction = function () {
  // Do something 
};

angular.element($window).on('scroll', onScrollAction);

scope.$on('$destroy', function () {

  angular.element($window).off('scroll', onScrollAction);
});

Note that in jQuery the functions bind and unbind are deprecated. You can however still use them both with jQuery and jqLite as they just call on and off behind the scenes.

Answer 3

Just for more clearity on how it will goes in directive Within link function just use this make sure attach it to write element as in example it is attached to document

                //attach event to document which is big thing
                //make sure we remove it once we done with this
                $document.on('keydown', handler);

                //We need to remove this event as it should be only applicable when user is withing 
                //the scope of directive parent
                scope.$on("$destroy", function () {
                    $document.off('keydown', handler);
                });
                //function gets executed when we hit the key specified from form
                function handler (event) {
                }

Answer 4

JQuery's on() supports namespacing events so they can be removed independent of each other.
(https://api.jquery.com/on/)

Angular's jqLite however, does not.
(https://docs.angularjs.org/api/ng/function/angular.element)

But if you include JQuery before Angular then JQuery will replace jqLite and you should be able to use namespaces. That's possibly not what you wanted to hear, but I'm not aware of any other way.