rootScope美元。$broadcast vs. $scope.$emit

小开

它们所做的工作并不相同:$emit通过作用域层次分派事件向上，而$broadcast将事件向下分派给所有子作用域。

小开

最佳答案

博士tl; (这个tl;dr来自@sp00m的答案)

$emit向上分派事件…$broadcast向下分派事件

详细解释

$rootScope.$emit只让其他$rootScope侦听器捕获它。当你不希望每个$scope都得到它时，这很好。主要是高层沟通。把它想象成成年人在房间里互相说话，这样孩子们就听不见了。

$rootScope.$broadcast是一个让几乎所有东西都能听到它的方法。这就相当于父母大喊晚饭准备好了，让家里的每个人都听到了。

$scope.$emit是当你想要$scope及其所有父类和$rootScope听到事件时。这是一个孩子在家里向父母抱怨(但不是在杂货店，因为其他孩子能听到)。

$scope.$broadcast是为$scope本身和它的子对象。这是一个孩子对着毛绒玩具窃窃私语，这样他们的父母就听不见了。

小开

艾迪对所问的问题给出了完美的答案。但我想提请大家注意使用更有效的Pub/Sub方法

正如这的答案所示，

$broadcast/$on方法不是非常有效，因为它向所有作用域广播(在作用域层次结构的一个方向或两个方向)。而Pub/Sub方式要直接得多。只有订阅者才能获得事件，因此不需要到系统中的每个作用域才能使其工作。

你可以使用angular-PubSub angular模块。一旦你将PubSub模块添加到你的应用依赖项中，你就可以使用PubSub服务来订阅和取消订阅事件/主题。

订阅方便:

// Subscribe to event
var sub = PubSub.subscribe('event-name', function(topic, data){
    

});

易于发布

PubSub.publish('event-name', {
prop1: value1,
prop2: value2
});

要取消订阅，请使用PubSub.unsubscribe(sub);或PubSub.unsubscribe('event-name');。

不要忘记取消订阅以避免内存泄漏。

小开

我用下面的链接制作了下面的图形:https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

正如你所看到的，$rootScope.$broadcast比$scope.$emit击中更多的侦听器。

另外，$scope.$emit的冒泡效果可以取消，而$rootScope.$broadcast不能。

小开

在服务中使用RxJS

例如，如果你有一个处于保持状态的服务。我如何将更改推送到该服务，以及页面上的其他随机组件如何知道此类更改?最近一直在努力解决这个问题

使用Angular的RxJS扩展构建服务。

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>

var app = angular.module('myApp', ['rx']);


app.factory("DataService", function(rx) {
var subject = new rx.Subject();
var data = "Initial";


return {
set: function set(d){
data = d;
subject.onNext(d);
},
get: function get() {
return data;
},
subscribe: function (o) {
return subject.subscribe(o);
}
};
});

然后只需订阅这些更改。

app.controller('displayCtrl', function(DataService) {
var $ctrl = this;


$ctrl.data = DataService.get();
var subscription = DataService.subscribe(function onNext(d) {
$ctrl.data = d;
});


this.$onDestroy = function() {
subscription.dispose();
};
});

客户端可以使用DataService.subscribe订阅更改，生产者可以使用DataService.set推送更改。

演示在PLNKR。

小开

美元的范围。$emit:这个方法向上分发事件(从子对象到父对象)

美元的范围。$broadcast:方法向下分发事件(从父控制器到子控制器)到所有子控制器

美元的范围。$on:方法注册监听某个事件。所有正在侦听该事件的控制器获得广播或发出的通知这是孩子和父母之间的关系。< / p >

$emit事件可以被监听该事件的任何一个$作用域取消。

$on提供了“stopPropagation”方法。通过调用此方法，可以阻止事件进一步传播。

砰砰作响:https://embed.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

对于兄弟作用域(不在直接父子层次结构中的作用域)，则$emit和$broadcast将不会与兄弟作用域通信。