为什么我们在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是什么区别?

  1. $rootScope.$broadcast做什么?

    $rootScope.$broadcast正在通过应用程序范围发送一个事件。 该应用程序的任何子范围都可以使用简单的$scope.$on()来捕获它。

    当您想要到达不是直接父级的作用域时,发送事件尤其有用(例如,父级的分支)

    ! 不过,有一件事情是不要 $rootScope.$on控制器$rootScope.$on使用$rootScope.$on$rootScope是应用程序,当你的控制器被销毁时,事件监听器仍然存在,并且当你的控制器被重新创build时,它将会堆积更多的事件监听器。 (所以一次广播将被多次抓到)。 使用$scope.$on() ,而侦听器也将被销毁。

  2. $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 })