$ rootScope.$ on与$ scope.$ on之间的差异

本文介绍了$ rootScope.$ on与$ scope.$ on之间的差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有人可以帮助我理解使用$rootScope.$on和$scope.$on的方式.

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

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

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

我的查询适用于以下情况:

My query is for below Scenario:

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

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

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

推荐答案

这是一个很好的问题，为您提供了一个解释.

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

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

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

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

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

$scope.on();将被自动销毁.
您需要手动销毁$rootScope.$on().

$scope.on(); will be destroyed automatically when the controller loses it representation in view or component (getting destroyed).
You need to destroy $rootScope.$on() manually.

//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绑定表示形式->控制器也被破坏了).

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).

$rootScope.$emit()事件仅触发$rootScope.$on()事件.
$rootScope.$broadcast()将触发$rootScope.$on()& $scope.on()事件(几乎所有听到此事件的人).
$scope.$emit()将触发所有$scope.$on，其所有父项(父控制器中的作用域)和$rootScope.$on().
$scope.$broadcast将仅触发$scope及其子项(子控制器中的作用域).

$rootScope.$emit() events only triggers $rootScope.$on() events.
$rootScope.$broadcast() will trigger $rootScope.$on() & $scope.on()events (pretty much everthing hear this event).
$scope.$emit() will trigger all $scope.$on, all its parents (scopes in parent controllers) and $rootScope.$on().
$scope.$broadcast will only trigger $scope and its children (scopes in child controllers).

您需要吗取消绑定$ scope.$ on到$ scope $ destroy事件中?

这篇关于$ rootScope.$ on与$ scope.$ on之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

its