为什么我们在AngularJS中使用$ rootScope。$ broadcast?
试图findAngularJS $rootScope.$broadcast
一些基本信息,但是AngularJS文档没有什么帮助。 简单地说,为什么我们使用这个?
此外,在John Papa的Hot Towel模板中,在名为$broadcast
的通用模块中有一个自定义函数:
function $broadcast() { return $rootScope.$broadcast.apply($rootScope, arguments); }
我不明白这是做什么。 所以这里有几个基本的问题:
1) $rootScope.$broadcast
做什么?
2) $rootScope.$broadcast
和$rootScope.$broadcast.apply
是什么区别?
-
$rootScope.$broadcast
做什么?$rootScope.$broadcast
正在通过应用程序范围发送一个事件。 该应用程序的任何子范围都可以使用简单的$scope.$on()
来捕获它。当您想要到达不是直接父级的作用域时,发送事件尤其有用(例如,父级的分支)
! 不过,有一件事情是不要
$rootScope.$on
控制器$rootScope.$on
使用$rootScope.$on
。$rootScope
是应用程序,当你的控制器被销毁时,事件监听器仍然存在,并且当你的控制器被重新创build时,它将会堆积更多的事件监听器。 (所以一次广播将被多次抓到)。 使用$scope.$on()
,而侦听器也将被销毁。 -
$rootScope.$broadcast
&$rootScope.$broadcast.apply
是什么区别?有时你必须使用
apply()
,特别是在处理指令和其他JS库时。 但是由于我不知道这个代码库,所以我不能说这是否是这种情况。
$rootScope
基本上作为一个事件监听器和调度器。
要回答如何使用它的问题,它与rootScope.$on
一起使用rootScope.$on
$rootScope.$broadcast("hi"); $rootScope.$on("hi", function(){ //do something });
不过,使用$rootScope
作为自己的应用程序的通用事件服务是一种不好的做法,因为在每个应用程序依赖于$ rootScope的情况下,您将很快结束,而您不知道哪些组件正在侦听哪些事件。
最佳做法是为每个要收听或播放的自定义事件创build一个服务。
.service("hiEventService",function($rootScope) { this.broadcast = function() {$rootScope.$broadcast("hi")} this.listen = function(callback) {$rootScope.$on("hi",callback)} })
$ rootScope。$ broadcast是一种提升所有子范围可以侦听的“全局”事件的方便方法。 您只需要使用$rootScope
广播消息,因为所有的后代作用域都可以侦听。
根作用域广播事件:
$rootScope.$broadcast("myEvent");
任何孩子范围可以听取事件:
$scope.$on("myEvent",function () {console.log('my event occurred');} );
为什么我们使用$ rootScope。$ broadcast? 您可以使用$watch
来监听variables更改并在variables状态更改时执行函数。 但是,在某些情况下,只需要引发应用程序的其他部分可以侦听的事件,而不pipe范围variables状态是否有任何更改。 这是$broadcast
是有帮助的。
$ rootScope。$ broadcast做什么?
它将消息广播给angular度应用程序中的各个听众,这是一种非常强大的方式,可以将消息传递到不同层级的作用域(无论是父,子或兄弟)
同样的,我们有$ rootScope。$ emit,唯一的区别是前者也被$ scope所捕获,而后者被$ root所捕获。
参考例子: – http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribeing/
传递数据!
$broadcast
接受一个参数,你可以使用callback函数传递一个将被$on
接收的Object
例:
// the object to transfert var myObject = { status : 10 } $rootScope.$broadcast('status_updated', myObject); $rootScope.$on('status_updated', function(event, obj){ console.log(obj.status); // 10 })