$rootScope.$on 与 $scope.$on 之间的区别

Question

有人可以帮我理解什么时候应该使用$rootScope.$on 和$scope.$on。

我知道它主要是为了听不同的范围（$rootScope 和 $scope）。

我的查询是针对以下场景：

我应该使用 $rootScope.$emit 和 $rootScope.$on

或

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

或

我应该去：$rootScope.$broadcast 和 $rootScope.$on

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

以上三种实现有什么区别？

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 开始，我们可以使用组件生命周期来以一种很好的方式管理初始化和销毁​​：

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()events（几乎所有的人都会听到这个事件）。
• $scope.$emit() 将触发所有$scope.$on、其所有父级（父级控制器中的作用域）和$rootScope.$on()。
• $scope.$broadcast 只会触发 $scope 及其子级（子控制器中的作用域）。

附加链接

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