Как удалить $rootScope.$on listener в Angularjs?

Question

[Егор]

Приветствую.

Слушаю событие для $rootScope в директиве. Элемент с директивой может исчезать и снова появляться на странице. Каждый раз при смене видимости происходит добавление слушателя для $rootScope. В результате при вызове события обработчик вызывается несколько раз.

Как правильно удалять $rootScope.$on в Angularjs? Сейчас использую $rootScope.$$listener, но в документации говорится что использовать приватные поля не стоит.

Answer 1

[Dmitry Dedukhin]

Момент удаления элемента отслеживаем так:

var deregFunc = $rootScope.$on('someEvent', function() {});
scope.$on('$destroy', function() {
  deregFunc();
});

Answer 2

[DigitalSmile]

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

$on
...
Returns
function() 	

Returns a deregistration function for this listener.

Но я бы вам советовал пореже использовать $rootScope, со временем он может превратиться в антипаттерн "глобальная переменнная". Лучше использовать сервисы как общие компоненты для нескольких модулей.

Comments

[Егор]

Спасибо за ссылку, вот только у моей директивы изолированный $scope; Получается та же глобальная переменная для хранения deregistration function, т.к хранить ее больше негде.

[DigitalSmile]

Егор: все зависит от кода, разумеется. Вообще мне кажется хорошей практикой использовать для целей хранения отдельный сервис. Например:

factory('SampleService', [function () {
    var deregistrationFunctions = {};
    return {
       register: function(id, deregisterFunction) {
           deregistrationFunctions[id] = deregisterFunction;
       },
       deregister: function(id) {
           if (angular.isDefined(deregistrationFunctions[id])
                  && angular.isFunction(deregistrationFunctions[id])) {
               deregistrationFunctions[id]();
           }
       }
       // любые методы манипуляции с объектом
    }
}]

При таком подходе методы сервиса можно использовать откуда угодно и, кстати, они отлично покрываются юнит тестами.