为什么在AngularJS中使用$rootScope.$broadcast?
试图找到AngularJS为什么在AngularJS中使用$rootScope.$broadcast?,angularjs,rootscope,Angularjs,Rootscope,试图找到AngularJS$rootScope.$broadcast的一些基本信息,但AngularJS文档没有多大帮助。简单地说,我们为什么要用这个 此外,在John Papa的模板中,公共模块中有一个名为$broadcast的自定义函数: function $broadcast() { return $rootScope.$broadcast.apply($rootScope, arguments); } 我不明白这是怎么回事。这里有两个基本问题: 1) $rootScope.$b
$rootScope.$broadcast
的一些基本信息,但AngularJS文档没有多大帮助。简单地说,我们为什么要用这个
此外,在John Papa的模板中,公共模块中有一个名为$broadcast
的自定义函数:
function $broadcast() {
return $rootScope.$broadcast.apply($rootScope, arguments);
}
我不明白这是怎么回事。这里有两个基本问题:
1) $rootScope.$broadcast
做什么
2)
$rootScope.$broadcast
和$rootScope.$broadcast.apply
之间有什么区别?$rootScope
基本上起到事件侦听器和调度程序的作用
要回答如何使用它的问题,请将它与rootScope.$on
结合使用
$rootScope.$broadcast("hi");
$rootScope.$on("hi", function(){
//do something
});
但是,使用$rootScope
作为您自己的应用程序的一般事件服务是一种不好的做法,因为您很快就会遇到这样的情况:每个应用程序都依赖于$rootScope,而您不知道哪些组件正在侦听哪些事件
最佳实践是为您想要收听或广播的每个自定义事件创建一个服务
.service("hiEventService",function($rootScope) {
this.broadcast = function() {$rootScope.$broadcast("hi")}
this.listen = function(callback) {$rootScope.$on("hi",callback)}
})
$rootScope.$broadcast做什么?
它通过angular应用程序向各个侦听器广播消息,这是一种非常强大的方法,可以将消息传输到不同层次的作用域(无论是父级、子级还是同级)
类似地,我们有$rootScope.$emit,唯一的区别是前者也被$scope.$on捕获,而后者只被$rootScope.$on捕获
请参阅示例:-$rootScope。$broadcast是引发所有子作用域都可以侦听的“全局”事件的便捷方法。您只需要使用
$rootScope
来广播消息,因为所有子作用域都可以侦听消息
根作用域广播事件:
任何子作用域都可以侦听事件:
为什么我们使用$rootScope.$broadcast?您可以使用$watch
监听变量更改,并在变量状态更改时执行函数。但是,在某些情况下,您只需要引发一个事件,应用程序的其他部分可以侦听该事件,而不管范围变量状态有何变化。此时,$broadcast
很有用
$rootScope.$broadcast
做什么
$rootScope.$broadcast
正在通过应用程序作用域发送事件。
该应用程序的任何子作用域都可以使用简单的:$scope.$on()
捕获它
当您想要到达一个不是直接父对象(例如父对象的分支)的作用域时,发送事件尤其有用
!!!但是,不能做的一件事是从控制器上使用$rootScope.$on
$rootScope
是应用程序,当您的控制器被销毁时,事件侦听器仍将存在,当您的控制器再次创建时,它只会堆积更多的事件侦听器。(因此一次广播将被多次捕获)。改为使用$scope.$on()
,侦听器也将被销毁$rootScope.$broadcast
和$rootScope.$broadcast.apply
之间有什么区别
有时您必须使用apply()
,尤其是在使用指令和其他JS库时。然而,由于我不知道这个代码库,所以我无法判断这里的情况是否如此$broadcast
接受一个可以传递对象的参数
示例:
// the object to transfert
var obj = {
status : 10
}
$rootScope.$broadcast('status_updated', obj);
之所以使用$rootScope.$broadcast.apply()
,是因为如果要将特殊的参数
对象传递给另一个函数,则需要使用apply()
(与call()
相反)。除了@Blackhole在apply上指向MDN页面的链接外,您还可以查看上的条目。谢谢@itcouldevenbeabout这行调用的不是将事件附加到全局$rootScope的相同逻辑吗?函数(){$rootScope.$broadcast(“hi”)},您提到的这是一种不好的做法?使用服务进行广播并附加特定事件的侦听器可以避免您不确定谁在侦听的情况。很明显,哪些组件将事件服务作为依赖项刚刚发现$emit和$broadcast之间的区别,我倾向于说最好是$emit事件-这样,您就可以在尽可能小的范围内处理事件,(理想情况下,服务应该有自己的范围,但我认为这不可能?)-1.我不明白,服务中的隔离比简单的广播有多好。无论如何,最好在服务中使用自己的私有作用域。最好使用$emit,而不是$broadcast。此外,您建议的服务不支持事件参数。更糟糕的是,它不支持取消订阅;$rootScope是一种致命的罪过。取消订阅的缺失会毁掉一切这是我的答案。如果您从控制器调用hiEventService.listen(callback)
,即使在控制器被销毁后,侦听器仍将存在。内存泄漏!绑定到控制器作用域$scope.$on(“hi”,callback)
带有自动清理功能。很好地解决了$rootScope.$on
内存泄漏问题。这也适用于已接受的答案,因为控制器可能会调用他创建的hiEventService
。您将使用$broadcast
与$broadcast.apply()的示例是什么
$rootScope.$broadcast将事件发送给所有侦听器,而不仅仅是来自子作用域的侦听器。$scope.$broadcast将事件限制为子作用域
$scope.$on("myEvent",function () {console.log('my event occurred');} );
// the object to transfert
var obj = {
status : 10
}
$rootScope.$broadcast('status_updated', obj);
$scope.$on('status_updated', function(event, obj){
console.log(obj.status); // 10
})