一尘不染

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

angularjs

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

我知道它主要是用于听取不同的作用域($ rootScope和$ scope)。

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

我应该使用: $ rootScope。$ emit$ rootScope。$ on

要么

我应该选择: $ rootScope。$ with $ scope。$ on 广播
我知道这不是一个好选择,因为它将广播给所有$scopeobj。

要么

我应该去: $ rootScope。$ broadcast$ rootScope。$ on

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

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


阅读 228

收藏
2020-07-04

共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()

通过在此插入控件中切换视图,控制器将重新绑定到您的视图。该$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及其子项(子控制器中的作用域)。
2020-07-04