我知道它主要用于听取不同的范围($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?