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

拼搏现实的明天。 2023-03-02 10:18 11阅读 0赞

本文翻译自：[$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][https_stackoom.com_question_1oFQM_rootScope-broadcast-vs-scope-emit]

--------------------

### \#2楼 ###

他们没有做同样的工作： `$emit`通过范围层次结构**向上**调度事件，而`$broadcast`将事件**向下**调度到所有子范围。

--------------------

### \#3楼 ###

***tl;dr** (this tl;dr is from [@sp00m][sp00m] 's answer below)* **tl; dr *（这个tl;博士来自[@ sp00m][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,* **正如[这个][this]答案所示，**

> *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-PubSub] angular module.* **你可以使用[`angular-PubSub`][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]* **我通过以下链接制作了以下图片： [https][https_toddmotto.com_all-about-angulars-emit-broadcast-on-publish-subscribing] ： [//toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/][https_toddmotto.com_all-about-angulars-emit-broadcast-on-publish-subscribing]**

[![范围，rootScope，发射，广播][rootScope]][rootScope]

*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][]构建服务。**

*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 on PLNKR]的[DEMO][DEMO on PLNKR] 。**

[rootScope._broadcast vs. _scope._emit]: https://oldbug.net/q/1oFQM/rootScope-broadcast-vs-scope-emit
[https_stackoom.com_question_1oFQM_rootScope-broadcast-vs-scope-emit]: https://stackoom.com/question/1oFQM/rootScope-broadcast-vs-scope-emit
[sp00m]: https://stackoverflow.com/a/26752415/699294
[this]: https://stackoverflow.com/a/21639013/842386
[angular-PubSub]: https://github.com/georapbox/angular-PubSub
[https_toddmotto.com_all-about-angulars-emit-broadcast-on-publish-subscribing]: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
[rootScope]: https://i.stack.imgur.com/wwOKe.png
[RxJS Extensions for Angular]: https://github.com/Reactive-Extensions/rx.angular.js
[DEMO on PLNKR]: https://plnkr.co/edit/YVKGhCx0DrzyzckMDjtv?p=preview