angularjs – $rootScope.$on vs $scope.$on.之间的差异

前端之家收集整理的这篇文章主要介绍了angularjs – $rootScope.$on vs $scope.$on.之间的差异前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有人可以帮我理解我们应该使用$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个实现有什么区别?

这是一个很好的问题,有一个解释.

首先要注意:

> $scope.on(‘event’);将听$scope.$broadcast(‘event’)& $rootScope.$广播( ‘事件’)
> $rootScope.on(‘event’);将收听$rootScope.$broadcast(‘event’)& $rootScope.$发出( ‘事件’)

接下来你需要注意:

> $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开始,我们可以使用组件生命周期来管理init并以一种很好的方式销毁:

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()事件(几乎听到这个事件).
> $scope.$emit()将触发所有$scope.$on,其所有父节点(父控制器中的作用域)和$rootScope.$on().
> $scope.$broadcast只会触发$scope及其子节点(子控制器中的范围).

其他链接

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

原文链接:https://www.f2er.com/angularjs/140774.html

猜你在找的Angularjs相关文章