angularjs – $rootScope.$on vs $scope.$on.之间的差异

首先要注意：

> $scope.on(‘event’);将听$scope.$broadcast(‘event’)& $rootScope.$广播( ‘事件’)
> $rootScope.on(‘event’);将收听$rootScope.$broadcast(‘event’)& $rootScope.$发出( ‘事件’)

接下来你需要注意：

> $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()的不同行为.

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

$emit&的区别$broadcast是：

> $rootScope.$emit()事件只触发$rootScope.$on()事件.
> $rootScope.$broadcast()将触发$rootScope.$on()& $scope.on()事件(几乎听到这个事件).
> $scope.$emit()将触发所有$scope.$on,其所有父节点(父控制器中的作用域)和$rootScope.$on().
> $scope.$broadcast只会触发$scope及其子节点(子控制器中的范围).

其他链接

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