$ rootScope. $ broadcast vs. $ scope. $ emettono

Ora che la differenza di prestazioni tra $broadcaste $emitè stato eliminato, non v'è alcun motivo per preferire $scope.$emita$rootScope.$broadcast ?

Sono diversi, sì.

$emit è limitato alla gerarchia dell'ambito (verso l'alto) - questo può essere buono, se si adatta al tuo progetto, ma mi sembra una restrizione piuttosto arbitraria.

$rootScope.$broadcastfunziona con tutti quelli che scelgono di ascoltare l'evento, che è una restrizione più sensata nella mia mente.

Mi sto perdendo qualcosa?

MODIFICARE:

Per chiarire in risposta a una risposta, la direzione della spedizione non è il problema che sto cercando. $scope.$emitinvia l'evento verso l'alto e $scope.$broadcast- verso il basso. Ma perché non usare sempre $rootScope.$broadcastper raggiungere tutti gli ascoltatori previsti?

tl; dr (questo tl; dr è dalla risposta di @ sp00m di seguito)

$emitinvia un evento verso l'alto ... $broadcastinvia un evento verso il basso

Spiegazione dettagliata

$rootScope.$emitconsente solo agli altri $rootScopeascoltatori di catturarlo. Questo va bene quando non vuoi tutto$scope lo ottengano. Principalmente una comunicazione di alto livello. Pensa a come adulti che parlano tra loro in una stanza in modo che i bambini non possano sentirli.

$rootScope.$broadcastè un metodo che permette praticamente a tutto di ascoltarlo. Questo sarebbe l'equivalente dei genitori che urlano che la cena è pronta in modo che tutti in casa la sentano.

$scope.$emitè quando vuoi questo $scopee tutti i suoi genitori e $rootScopeascoltare l'evento. Questo è un bambino che si lamenta con i genitori a casa (ma non in un negozio di alimentari dove gli altri bambini possono ascoltare).

$scope.$broadcastè per $scopese stesso e i suoi figli. Questo è un bambino che sussurra ai suoi animali di peluche in modo che i loro genitori non possano sentire.

Non stanno facendo lo stesso lavoro: $emitinvia un evento verso l' alto attraverso la gerarchia dell'ambito, mentre $broadcastinvia un evento verso il basso a tutti gli ambiti figlio.

Ho creato il seguente grafico dal seguente link: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Come puoi vedere, $rootScope.$broadcastcolpisce molto più ascoltatori di $scope.$emit.

Inoltre, $scope.$emitl'effetto gorgogliante può essere annullato, mentre $rootScope.$broadcastnon è possibile.

$ scope. $ emit: questo metodo invia l'evento verso l'alto (da figlio a genitore)

$ scope. $ broadcast: il metodo invia l'evento verso il basso (da genitore a figlio) a tutti i controllori figlio.

$ scope. $ on: il metodo registra per ascoltare alcuni eventi. Tutti i controller che stanno ascoltando quell'evento ricevono una notifica della trasmissione o emettono in base al punto in cui si inseriscono nella gerarchia padre-figlio.

L'evento $ emit può essere annullato da qualsiasi $ scope che sta ascoltando l'evento.

$ On fornisce il metodo "stopPropagation". Chiamando questo metodo è possibile interrompere ulteriormente la propagazione dell'evento.

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

Nel caso di ambiti fratelli (gli ambiti che non si trovano nella gerarchia padre-figlio diretta), allora $ emit e $ broadcast non comunicheranno agli ambiti fratelli.

Per maggiori dettagli, consultare http://yogeshtutorials.blogspot.in/2015/12/event-based-communication-between-angularjs-controllers.html

@Eddie ha dato una risposta perfetta alla domanda posta. Ma vorrei attirare l'attenzione sull'uso di un approccio più efficiente di Pub / Sub.

Come suggerisce questa risposta,

L'approccio $ broadcast / $ on non è terribilmente efficiente in quanto trasmette a tutti gli ambiti (in una direzione o in entrambe le direzioni della gerarchia Scope). Mentre l'approccio Pub / Sub è molto più diretto. Solo gli abbonati ricevono gli eventi, quindi non andranno in tutti gli ambiti del sistema per farlo funzionare.

puoi usare angular-PubSubil modulo angolare. una volta aggiunto il PubSubmodulo alla dipendenza dell'app, è possibile utilizzare il PubSubservizio per iscriversi e annullare l'iscrizione a eventi / argomenti.

Abbonarsi facilmente:

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

});

Facile da pubblicare

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

Per annullare l'iscrizione, utilizzare PubSub.unsubscribe(sub);OR PubSub.unsubscribe('event-name');.

NOTA Non dimenticare di annullare l'iscrizione per evitare perdite di memoria.

Usa RxJS in un servizio

Che dire in una situazione in cui hai un servizio che detiene lo stato, ad esempio. Come posso inviare modifiche a quel servizio e altri componenti casuali sulla pagina essere consapevoli di tale modifica? Ultimamente ho avuto difficoltà ad affrontare questo problema

Crea un servizio con le estensioni RxJS per 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);
      }
  };
});

Quindi semplicemente iscriviti alle modifiche.

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

I clienti possono abbonarsi ai cambiamenti con DataService.subscribee i produttori possono spingere i cambiamenti con DataService.set.

La DEMO su PLNKR .