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