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

本文翻译自：$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 。