$rootScope.$on 与 $scope.$on 的区别 [英] Difference between $rootScope.$on vs $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.$emit 和 $rootScope.$on

或

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

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.

或

我要不要去:$rootScope.$broadcast 和 $rootScope.$on

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

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

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

推荐答案

这是一个很好的问题，并且有一个解释.

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 $destroy 事件中解除 $scope.$on 的绑定?

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