本文翻译自:$rootScope.$broadcast vs. $scope.$emit
Now that the performance difference between $broadcast
and $emit
has been eliminated, is there any reason to prefer $scope.$emit
to $rootScope.$broadcast
? 现在已经消除了$broadcast
和$emit
之间的性能差异,是否有任何理由更喜欢$scope.$emit
to $rootScope.$broadcast
?
They are different, yes. 他们是不同的,是的。
$emit
is restricted to the scope hierarchy (upwards) - this may be good, if it fits your design, but it seems to me a rather arbitrary restriction. $emit
仅限于范围层次结构(向上) - 如果它符合您的设计,这可能是好的,但在我看来这是一个相当随意的限制。
$rootScope.$broadcast
works across all that choose to listen to the event, which is a more sensible restriction in my mind. $rootScope.$broadcast
适用于所有选择收听事件的人,这在我看来是一个更明智的限制。
Am I missing something? 我错过了什么吗?
EDIT: 编辑:
To clarify in response to an answer, the direction of the dispatch is not the issue I'm after. 为了澄清答案,发送的方向不是我追求的问题。 $scope.$emit
dispatches the event upwards, and $scope.$broadcast
- downwards. $scope.$emit
向上调度事件, $scope.$broadcast
- 向下调度。 But why not always use $rootScope.$broadcast
to reach all the intended listeners? 但为什么不总是使用$rootScope.$broadcast
来覆盖所有预期的听众呢?
#1楼
参考:https://stackoom.com/question/1oFQM/rootScope-broadcast-vs-scope-emit
#2楼
他们没有做同样的工作: $emit
通过范围层次结构向上调度事件,而$broadcast
将事件向下调度到所有子范围。
#3楼
tl;dr (this tl;dr is from @sp00m 's answer below) tl; dr (这个tl;博士来自@ sp00m的答案)
$emit
dispatches an event upwards ...$broadcast
dispatches an event downwards$emit
向上调度一个事件...$broadcast
向下调度一个事件
Detailed explanation 详细解释
$rootScope.$emit
only lets other $rootScope
listeners catch it. $rootScope.$emit
只允许其他$rootScope
侦听器捕获它。 This is good when you don't want every $scope
to get it. 当你不希望每个$scope
获得它时,这很好。 Mostly a high level communication. 主要是高级别的沟通。 Think of it as adults talking to each other in a room so the kids can't hear them. 可以把它想象成成年人在一个房间里互相交谈,这样孩子们就听不到了。
$rootScope.$broadcast
is a method that lets pretty much everything hear it. $rootScope.$broadcast
是一种几乎可以听到它的方法。 This would be the equivalent of parents yelling that dinner is ready so everyone in the house hears it. 这相当于父母大喊大叫,晚餐准备就绪,所以房子里的每个人都听到了。
$scope.$emit
is when you want that $scope
and all its parents and $rootScope
to hear the event. $scope.$emit
是你希望$scope
及其所有父项和$rootScope
听到事件的时间。 This is a child whining to their parents at home (but not at a grocery store where other kids can hear). 这是一个在家里向父母抱怨的孩子(但不是在其他孩子可以听到的杂货店)。
$scope.$broadcast
is for the $scope
itself and its children. $scope.$broadcast
用于$scope
本身及其子节点。 This is a child whispering to its stuffed animals so their parents can't hear. 这是一个孩子对它的毛绒动物窃窃私语,所以他们的父母听不到。
#4楼
@Eddie has given a perfect answer of the question asked. @Eddie给出了问题的完美答案。 But I would like to draw attention to using an more efficient approach of Pub/Sub. 但我想提请注意使用更有效的Pub / Sub方法。
As this answer suggests, 正如这个答案所示,
The $broadcast/$on approach is not terribly efficient as it broadcasts to all the scopes(Either in one direction or both direction of Scope hierarchy). $ broadcast / $ on方法不是非常有效,因为它广播到所有范围(在Scope层次结构的一个方向或两个方向上)。 While the Pub/Sub approach is much more direct. 而Pub / Sub方法更直接。 Only subscribers get the events, so it isn't going to every scope in the system to make it work. 只有订阅者才能获得事件,因此不会让系统中的每个范围都能使其生效。
you can use angular-PubSub
angular module. 你可以使用angular-PubSub
角度模块。 once you add PubSub
module to your app dependency, you can use PubSub
service to subscribe and unsubscribe events/topics. 将PubSub
模块添加到app依赖项后,您可以使用PubSub
服务订阅和取消订阅事件/主题。
Easy to subscribe: 易于订阅:
// Subscribe to event
var sub = PubSub.subscribe('event-name', function(topic, data){
});
Easy to publish 易于发布
PubSub.publish('event-name', {
prop1: value1,
prop2: value2
});
To unsubscribe, use PubSub.unsubscribe(sub);
要取消订阅,请使用PubSub.unsubscribe(sub);
OR PubSub.unsubscribe('event-name');
或PubSub.unsubscribe('event-name');
. 。
NOTE Don't forget to unsubscribe to avoid memory leaks. 注意不要忘记取消订阅以避免内存泄漏。
#5楼
I made the following graphic out of the following link: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/ 我通过以下链接制作了以下图片: https : //toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
As you can see, $rootScope.$broadcast
hits a lot more listeners than $scope.$emit
. 正如你所看到的, $rootScope.$broadcast
比$scope.$emit
更多听众$scope.$emit
。
Also, $scope.$emit
's bubbling effect can be cancelled, whereas $rootScope.$broadcast
cannot. 另外, $scope.$emit
的冒泡效果可以取消,而$rootScope.$broadcast
则不能。
#6楼
Use RxJS in a Service 在服务中使用RxJS
What about in a situation where you have a Service that's holding state for example. 例如,在您拥有一个处于保持状态的服务的情况下。 How could I push changes to that Service, and other random components on the page be aware of such a change? 如何将更改推送到该服务,页面上的其他随机组件是否知道这种更改? Been struggling with tackling this problem lately 最近一直在努力解决这个问题
Build a service with RxJS Extensions for Angular . 使用RxJS Extensions for Angular构建服务。
<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);
}
};
});
Then simply subscribe to the changes. 然后只需订阅更改。
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();
};
});
Clients can subscribe to changes with DataService.subscribe
and producers can push changes with DataService.set
. 客户端可以使用DataService.subscribe
订阅更改,生产者可以使用DataService.set
推送更改。
The DEMO on PLNKR . PLNKR上的DEMO 。