为什么我们在 AngularJS 中使用 $rootScope.$broadcast？

Question

试图找到 AngularJS $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什么区别？

Answer 1

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

Answer 2

1. $rootScope.$broadcast什么作用？

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

   当您想要访问不是直接父级的范围（例如父级的分支）时，发送事件特别有用

   ！！！ 然而，不要做的一件事是从控制器使用$rootScope.$on 。 $rootScope是应用程序，当你的控制器被销毁时，事件监听器仍然存在，当你的控制器再次创建时，它只会堆积更多的事件监听器。 （所以一个广播会被多次捕获）。 改用$scope.$on() ，监听器也会被销毁。

2. $rootScope.$broadcast和$rootScope.$broadcast.apply什么区别？

   有时您必须使用apply() ，尤其是在使用指令和其他 JS 库时。 但是，由于我不知道该代码库，因此我无法判断是否是这种情况。

Answer 3

$rootScope.$broadcast是一种引发所有子作用域都可以侦听的“全局”事件的便捷方法。 您只需要使用$rootScope来广播消息，因为所有后代作用域都可以侦听它。

根作用域广播事件：

$rootScope.$broadcast("myEvent");

任何子作用域都可以监听事件：

$scope.$on("myEvent",function () {console.log('my event occurred');} );

为什么我们使用 $rootScope.$broadcast？ 您可以使用$watch来监听变量变化并在变量状态发生变化时执行函数。 但是，在某些情况下，您只想引发应用程序的其他部分可以侦听的事件，而不管范围变量状态的任何更改。 这是$broadcast有用的时候。

Answer 4

传递数据！！！

我想知道为什么没有人提到$broadcast接受一个可以传递Object的参数

例子：

// 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
})

Answer 5

$rootScope.$broadcast 有什么作用？

它向整个 angular 应用程序中的各个侦听器广播消息，这是将消息传输到不同层次级别的范围（无论是父级、子级还是兄弟级）的一种非常强大的方法

同样，我们有 $rootScope.$emit，唯一的区别是前者也被 $scope.$on 捕获，而后者仅被 $rootScope.$on 捕获。

参考示例：- http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/