如何解决$ rootScope$ on与$ scope$ on之间的差异
这是一个很好的问题,有一个解释给您。
首先请注意:
-
$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
及其子项(子控制器中的作用域)。
解决方法
有人可以帮我了解应使用$rootScope.$on
和的方式$scope.$on
。
我知道它主要是用于听取不同的作用域($ rootScope和$ scope)。
我的查询适用于以下情况:
我应该使用: $ rootScope。$ emit 与 $ rootScope。$ on
要么
我应该选择: $ rootScope。$ with $ scope。$ on 广播 。
我知道这不是一个好选择,因为它将广播给所有$scope
obj。
要么
我应该去: $ rootScope。$ broadcast 与 $ rootScope。$ on
如您所见,我需要在$ rootScope级别上处理事件。
以上3种实现有什么区别?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。