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

Question

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

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

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

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

或者

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.

或者

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

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

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

Answer 1

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

首先请注意:

• $scope.on('event'); 将监听 $scope.$broadcast('event') 和 $rootScope。 $broadcast('事件')

• $rootScope.on('event'); 将监听 $rootScope.$broadcast('event') 和 $rootScope。 $emit('事件')

接下来您需要注意:

当 Controller 失去其在 View 或组件中的表示(被销毁)时，
• $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() 的不同行为。

通过切换 View plunkr Controller 将重新绑定(bind)到您的 View 。每次切换 View 时都会绑定(bind) $rootScope.on(); 事件，而不会破坏之前 View 的事件绑定(bind)。这样，$rootScope.on() 监听器将被堆叠/倍增。 $scope.on() 绑定(bind)不会发生这种情况，因为它将通过切换 View 而被销毁(丢失 DOM 中的 E2E 绑定(bind)表示 -> Controller 被销毁)。

$emit 和 $broadcast 之间的区别是:

• $rootScope.$emit() 事件仅触发 $rootScope.$on() 事件。
• $rootScope.$broadcast() 将触发 $rootScope.$on() 和 $scope.on() 事件(漂亮很多事情都听到了这个事件)。
• $scope.$emit() 将触发所有 $scope.$on、其所有父级(父 Controller 中的作用域)和 $rootScope.$ .
• $scope.$broadcast 只会触发 $scope 及其子级(子 Controller 中的范围)。

其他链接

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