Разница между $rootScope.$ On и $scope.$ On

Question

Может ли кто-нибудь помочь мне понять, когда мы должны использовать $rootScope.$on а также $scope.$on,

Я знаю, что это в основном для слышания различной области видимости ($ rootScope и $ scope).

Мой запрос для ниже сценария:

Должен ли я использовать: $ rootScope. $ Emit with $ rootScope. $ On

ИЛИ ЖЕ

Я предпочитаю: $ rootScope. $ Широковещательный с $ scope. $ On Я знаю, что это не очень хороший вариант, так как он будет транслироваться всем $scope OBJ.

ИЛИ ЖЕ

Должен ли я перейти к: $ rootScope. $ Трансляции с $ rootScope. $ On

Как видите, мне нужно обработать событие на уровне $ rootScope.

Какая разница в 3 выше реализации?

Answer 1

Это хорошие вопросы и есть объяснение для вас.

Прежде всего обратите внимание, что:

• $scope.on('event'); будет слушать $scope.$broadcast('event') & $rootScope.$broadcast('event')

• $rootScope.on('event'); будет слушать $rootScope.$broadcast('event') & $rootScope.$emit('event')

Далее необходимо отметить, что:

• $scope.on(); будет уничтожен автоматически, когда контроллер потеряет свое представление в виде или компоненте (уничтожается).
• Вам нужно уничтожить $rootScope.$on() вручную.

>> Пример того, как уничтожить $rootScope.on():

//bind event
var registerScope = $rootScope.$on('someEvent', function(event) {
    console.log("fired");
});

// auto clean up `$rootScope` listener when controller getting destroy
// listeners will be destroyed by calling the returned function like registerScope();
$scope.$on('$destroy', registerScope);

>>> Начиная с Angular v1.5, мы можем использовать жизненный цикл компонента для управления init и уничтожением хорошим способом:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope) {

  var registerScope = null;

  this.$onInit = function () {
    //register rootScope event
    registerScope = $rootScope.$on('someEvent', function(event) {
        console.log("fired");
    });
  }

  this.$onDestroy = function () {
    //unregister rootScope event by calling the return function
    registerScope();
  }
});

Этот plnkr покажет вам различные варианты поведения $scope.on() а также $rootScope.on(),

При переключении вида в этом планкре контроллер будет перенаправлен на ваш вид. $rootScope.on(); Событие связывается каждый раз, когда вы переключаете представление, не разрушая привязки событий представления ранее. Таким образом, $rootScope.on() слушатели будут сложены / умножены. Это не произойдет с $scope.on() привязки, потому что это будет уничтожено переключением представления (потеря представления связывания E2E в контроллере DOM -> уничтожается).

Разница между $emit & $broadcast является:

• $rootScope.$emit() события только триггеры $rootScope.$on() События.
• $rootScope.$broadcast() сработает $rootScope.$on() & $scope.on() события (почти все слышат это событие).
• $scope.$emit() вызовет все $scope.$on, все его родители (выходы в родительские контроллеры) и $rootScope.$on(),
• $scope.$broadcast будет только срабатывать $scope и его дети (выходы в дочерние контроллеры).

Дополнительные ссылки

• Вам нужно отменить привязку $scope.$ On к событию $scope $destroy?