$ rootScope。$ on vs $ scope。$ on。之间的区别

Can someone help me understand the way when we should use $rootScope.$on and $scope.$on.

有人可以帮我理解我们应该使用$ rootScope。$ on和$ scope。$ on的方式。

I know that its mostly for hearing different scope ($rootScope and $scope).

我知道它主要用于听取不同的范围($ rootScope和$ scope)。

My query is for below Scenario:

我的查询适用于以下场景:

Shall I use : $rootScope.$emit with $rootScope.$on

我可以使用:$ rootScope。$ $ with $ rootScope。$ on

OR

Shall I prefer: $rootScope.$broadcast with $scope.$on I know this will be not a good option as it'll broadcast to all $scope obj.

我更喜欢:$ rootScope。$ $ with $ scope。$ on我知道这不是一个好选项,因为它会广播到所有$ scope obj。

OR

Shall I go for: $rootScope.$broadcast with $rootScope.$on

我要去:$ rootScope。$ with $ rootScope。$ on

As you can see, I need to handle event on $rootScope level.

如您所见,我需要处理$ rootScope级别的事件。

What is the difference in above 3 implementations ?

以上3个实现有什么区别?

1 个解决方案

#1

This is a good questions and there is an explanation for you.

这是一个很好的问题,有一个解释。

First of all note that:

• $scope.on('event'); will listen to $scope.$broadcast('event') & $rootScope.$broadcast('event')

  $ scope.on( '事件');将收听$ scope。$ broadcast('event')&$ rootScope。$ broadcast('event')

• $rootScope.on('event'); will listen to $rootScope.$broadcast('event') & $rootScope.$emit('event')

  $ rootScope.on( '事件');将收听$ rootScope。$ broadcast('event')&$ rootScope。$ emit('event')

Next you need to note that:

• $scope.on(); will be destroyed automatically when the controller loses it representation in view or component (getting destroyed).

$ scope.on();当控制器在视图或组件中丢失它时,将被自动销毁(被破坏)。

• You need to destroy $rootScope.$on() manually.

你需要手动销毁$ rootScope。$ on()。

>> Example of how to destroy $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);

>>> Since Angular v1.5 we can use component lifecycle to manage init and destroys in a nice way:

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();
  }
});

This plnkr will show you the different behaviors of $scope.on() and $rootScope.on().

By switching the view in this plunkr the controller will be rebinded to your view. The $rootScope.on(); event is binded every time you switch a view without destroying the event bindings of the view before. In that way the $rootScope.on() listeners will be stacked/multiplied. This will not happen to the $scope.on() bindings because it will be destroyed by switching the view (losing the E2E binding representation in DOM -> controller is destroyed).

通过切换此plunkr中的视图,控制器将被重新绑定到您的视图。 $ rootScope.on();每次切换视图时都会绑定事件,而不会破坏之前视图的事件绑定。这样,$ rootScope.on()侦听器将被堆叠/相乘。这不会发生在$ scope.on()绑定中,因为它将通过切换视图来销毁(在DOM中丢失E2E绑定表示 - >控制器被销毁)。

The difference between $emit & $broadcast is:

• $rootScope.$emit() events only triggers $rootScope.$on() events.

$ rootScope。$ emit()事件只触发$ rootScope。$ on()事件。

• $rootScope.$broadcast() will trigger $rootScope.$on() & $scope.on()events (pretty much everthing hear this event).

$ rootScope。$ broadcast()将触发$ rootScope。$ on()和$ scope.on()事件(几乎听到这个事件)。

• $scope.$emit() will trigger all $scope.$on, all its parents (scopes in parent controllers) and $rootScope.$on().

$ scope。$ emit()将触发所有$ scope。$ on,其所有父节点(父控制器中的作用域)和$ rootScope。$ on()。

• $scope.$broadcast will only trigger $scope and its children (scopes in child controllers).

$ scope。$ broadcast只会触发$ scope及其子节点(子控制器中的范围)。

Additional Links

• Do you need to unbind $scope.$on in $scope $destroy event?

你需要在$ scope $ destroy事件中取消绑定$ scope。$ on吗?