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

Jetzt, da der performancesunterschied zwischen $broadcast und $rootScope.$broadcast eliminiert wurde, gibt es einen Grund, $scope.$emit zu bevorzugen $scope.$emit $rootScope.$broadcast to $rootScope.$broadcast ?

Sie sind anders, ja.

$emit beschränkt sich auf die Scope-Hierarchie (nach oben) – das mag gut sein, wenn es zu Ihrem Design passt, aber es scheint mir eine ziemlich willkürliche Einschränkung zu sein.

$rootScope.$broadcast funktioniert bei allen, die sich dafür entscheiden , auf das Ereignis zu hören, was für mich eine vernünftige Einschränkung darstellt.

Fehle ich etwas?

BEARBEITEN:

Um auf eine Antwort zu antworten, ist die Richtung des Versands nicht das Thema, nach dem ich suche. $scope.$emit $scope.$broadcast das Ereignis nach oben und $scope.$broadcast – downward. Aber warum nicht immer $rootScope.$broadcast , um alle $rootScope.$broadcast Zuhörer zu erreichen?

Solutions Collecting From Web of "$ rootScope. $ broadcast vs. $ scope. $ emit"

tl; dr (diese tl; dr ist von @ sp00m ‘s Antwort unten)

$emit $broadcast ein Ereignis nach oben … $broadcast triggers ein Ereignis nach unten aus

Ausführliche Erklärung

$rootScope.$emit lässt nur andere $rootScope Listener es fangen. Das ist gut, wenn Sie nicht wollen, dass jedes $scope es bekommt. Meist eine Kommunikation auf hohem Niveau. Stellen Sie sich vor, dass Erwachsene miteinander in einem Raum sprechen, damit die Kinder sie nicht hören können.

$rootScope.$broadcast ist eine Methode, die so ziemlich alles hören lässt. Dies würde dem Äquivalent von Eltern entsprechen, die schreien, dass das Abendessen fertig ist, so dass jeder im Haus es hört.

$scope.$emit ist, wenn Sie wollen, dass $scope und all seine Eltern und $rootScope das Ereignis hören. Dies ist ein Kind, das zu Hause bei seinen Eltern winselt (aber nicht in einem Lebensmittelgeschäft, wo andere Kinder es hören können).

$scope.$broadcast ist für den $scope selbst und seine Kinder. Dies ist ein Kind, das zu seinen ausgestopften Tieren flüstert, damit ihre Eltern es nicht hören können.

Sie machen nicht den gleichen Job: $emit $broadcast ein Ereignis nach oben durch die Bereichshierarchie, während $broadcast ein Ereignis nach unten an alle untergeordneten Bereiche $broadcast .

Aus folgendem Link habe ich folgende Grafik erstellt: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Scope, rootScope, emittieren, senden

Wie Sie sehen, $rootScope.$broadcast wesentlich mehr Listener als $scope.$emit .

Außerdem kann der $rootScope.$broadcast abgebrochen werden, während $rootScope.$broadcast das nicht kann.

Bildbeschreibung hier eingeben

$ scope. $ emit: Diese Methode triggers das Ereignis nach oben aus (von Kind zu Eltern)

Bildbeschreibung hier eingeben $ scope. $ broadcast: Methode triggers das Ereignis in Abwärtsrichtung (von Eltern zu Kind) an alle untergeordneten Controller aus.

Bildbeschreibung hier eingeben $ scope. $ on: Die Methode registriert sich, um ein Ereignis zu hören. Alle Controller, die dieses Ereignis überwachen, erhalten eine Benachrichtigung über die Übertragung oder senden basierend darauf, wo diese in die Kind-Eltern-Hierarchie passen.

Das $ emitter-Ereignis kann von einem der $ scope abgebrochen werden, der das Ereignis abhört.

$ On stellt die Methode “stopPropagation” bereit. Durch Aufruf dieser Methode kann das Fortschreiten des Ereignisses gestoppt werden.

Plunker: https://embed.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

Im Fall von Geschwisterbereichen (die Bereiche, die nicht in der direkten Eltern-Kind-Hierarchie sind), werden $ emit und $ broadcast nicht mit den Geschwisterbereichen kommunizieren.

Bildbeschreibung hier eingeben

Weitere Informationen finden Sie unter http://yogeshtutorials.blogspot.in/2015/12/event-based-communications-between-angularjs-controllers.html

@Eddie hat die gestellte Frage perfekt beantwortet. Ich möchte jedoch auf die Verwendung eines effizienteren Pub / Sub-Ansatzes aufmerksam machen.

Wie diese Antwort nahelegt,

Der $ broadcast / $ on-Ansatz ist nicht besonders effizient, da er an alle Bereiche gesendet wird (entweder in einer Richtung oder in beiden Richtungen der Scope-Hierarchie). Während der Pub / Sub-Ansatz viel direkter ist. Nur Abonnenten erhalten die Ereignisse, daher wird nicht jeder Bereich im System ausgeführt, damit es funktioniert.

Sie können angular-PubSub angularmodul verwenden. Sobald Sie das PubSub Modul zu Ihrer App-Abhängigkeit PubSub , können Sie den PubSub Service zum Abonnieren und Abbestellen von Ereignissen / Themen verwenden.

Einfach zu abonnieren:

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

Einfach zu veröffentlichen

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

Verwenden PubSub.unsubscribe(sub); zum Abbestellen PubSub.unsubscribe(sub); ODER PubSub.unsubscribe('event-name'); .

HINWEIS Vergessen Sie nicht, sich abzumelden, um Speicherlecks zu vermeiden.

Verwenden Sie RxJS in einem Dienst

Was ist mit einer Situation, in der Sie einen Service haben, der zum Beispiel einen Status hält? Wie kann ich Änderungen an diesen Service weitergeben, und andere zufällige Komponenten auf der Seite müssen sich einer solchen Änderung bewusst sein? Ich habe in letzter Zeit mit diesem Problem zu kämpfen

Erstellen Sie einen Dienst mit RxJS-Erweiterungen für Angular .

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

Dann abonnieren Sie einfach die Änderungen.

 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 können Änderungen mit DataService.subscribe und Hersteller können Änderungen mit DataService.set .

Die DEMO auf PLNKR .