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

Question

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

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

我的查询适用于以下情景：

  

我可以使用 $ rootScope。$ emit 与 $ rootScope。$ on

OR

  

我更喜欢： $ rootScope。$ broadcast $ scope。$ on   我知道这不是一个好的选择，因为它会向所有$scope对象广播。

OR

  

我应该选择 $ rootScope。$ broadcast $ rootScope。$ on

如您所见，我需要在$ rootScope级别上处理事件。

以上3项实施有何不同？

Answer 1

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

首先请注意：

• $scope.on('event');会收听$scope.$broadcast('event')＆amp; $rootScope.$broadcast('event')

• $rootScope.on('event');会收听$rootScope.$broadcast('event')＆amp; $rootScope.$emit('event')

接下来你需要注意：

当控制器在视图或组件中丢失它时，
• $scope.on();将被自动销毁（被破坏）。
• 您需要手动销毁$rootScope.$on()。

＆GT;＆GT;如何销毁$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);

＆GT;＆GT;＆GT;从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()的不同行为。

通过切换此plunkr中的视图，控制器将被重新绑定到您的视图。每次切换视图时都会绑定$rootScope.on();事件，而不会破坏之前视图的事件绑定。以这种方式，$rootScope.on()听众将被叠加/相乘。 $scope.on()绑定不会发生这种情况，因为它会通过切换视图而被破坏（在DOM中丢失E2E绑定表示 - ＆gt;控制器被破坏）。

$emit＆amp;之间的差异$broadcast是：

• $rootScope.$emit()个事件仅触发$rootScope.$on()个事件。
• $rootScope.$broadcast()会触发$rootScope.$on()＆amp; $scope.on()个事件（几乎可以听到此事件）。
• $scope.$emit()将触发所有$scope.$on，所有父项（父控制器中的作用域）和$rootScope.$on()。
• $scope.$broadcast只会触发$scope及其子节点（子控制器中的范围）。

其他链接

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