AngularJS - Unbind $окно события из определенной директивы

В одной из моих директив я использую angular.element($window).bind('scroll'). Когда директива уничтожена, я хочу unbind ее. Обычно я просто делал:

$scope.$on('$destroy', function()
{
    angular.element($window).unbind('scroll');
});

Но что, если другая директива также привязана к событию scroll для $window, и это событие все еще должно существовать. Если я использую unbind выше, то также исключается другая привязка директивы.

Каковы мои варианты?

Ответ 1

Передайте ту же функцию, что и unbind/off, когда вы переходите на bind/on, чтобы развязать только этот конкретный обработчик:

var fn = function () {};

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

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

Например:

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

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

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

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

Обратите внимание, что в jQuery функции bind и unbind устарели. Тем не менее, вы можете использовать их как с jQuery, так и с jqLite, поскольку они просто вызывают on и off за кулисами.

Ответ 2

JQuery on() поддерживает события, связанные с именами, поэтому они могут быть удалены независимо друг от друга.
( https://api.jquery.com/on/)

Angular jqLite, однако, нет.
( https://docs.angularjs.org/api/ng/function/angular.element)

Но если вы включите JQuery до Angular, то JQuery заменит jqLite, и вы сможете использовать пространства имен. Возможно, это не то, что вы хотели услышать, но я не знаю другого пути.

Ответ 3

Просто для большей ясности относительно того, как это будет происходить в директиве. Внутри функции ссылок просто используйте это, чтобы убедиться, что она прикреплена к элементу записи, как в примере, она прикреплена к документу

                //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) {
                }