$ rootScope. $ broadcast frente a $ scope. $ emitir

Ahora que se ha eliminado la diferencia de rendimiento entre $broadcast y $emit , ¿hay alguna razón para preferir $scope.$emit $rootScope.$broadcast a $rootScope.$broadcast ?

Ellos son diferentes, sí.

$emit está restringido a la jerarquía de scope (hacia arriba); esto puede ser bueno, si se ajusta a su diseño, pero me parece una restricción bastante arbitraria.

$rootScope.$broadcast funciona en todos los que eligen escuchar el evento, lo cual es una restricción más sensata en mi mente.

¿Me estoy perdiendo de algo?

EDITAR:

Para aclarar en respuesta a una respuesta, la dirección del envío no es el problema que estoy buscando. $scope.$emit despacha el evento hacia arriba, y $scope.$broadcast – hacia abajo. Pero, ¿por qué no utilizar siempre $rootScope.$broadcast para llegar a todos los oyentes previstos?

tl; dr (este tl; dr es de la respuesta de @ sp00m a continuación)

$emit despacha un evento hacia arriba … $broadcast distribuye un evento hacia abajo

Explicación detallada

$rootScope.$emit solo permite que otros oyentes $rootScope . Esto es bueno cuando no quiere que cada $scope obtenga. Mayormente una comunicación de alto nivel. Piense en ello cuando los adultos hablan entre sí en una habitación para que los niños no puedan oírlos.

$rootScope.$broadcast es un método que permite que prácticamente todo lo escuche. Esto equivaldría a que los padres griten que la cena está lista para que todos en la casa la escuchen.

$scope.$emit es cuando quieres que $scope y todos sus padres y $rootScope escuchen el evento. Este es un niño que se queja a sus padres en casa (pero no en una tienda de comestibles donde otros niños pueden oír).

$scope.$broadcast es para $scope sí y sus hijos. Este es un niño susurrando a sus animales de peluche para que sus padres no puedan escuchar.

No están haciendo el mismo trabajo: $emit despacha un evento hacia arriba a través de la jerarquía de scope, mientras que $broadcast distribuye un evento hacia abajo a todos los ámbitos secundarios.

Hice el siguiente gráfico en el siguiente enlace: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Ámbito, rootScope, emitir, transmitir

Como puede ver, $rootScope.$broadcast golpea a muchos más oyentes que $scope.$emit .

Además, el efecto de burbujeo de $rootScope.$broadcast se puede cancelar, mientras que $rootScope.$broadcast no puede.

enter image description here

$ scope. $ emit: este método distribuye el evento hacia arriba (de niño a padre)

enter image description here $ scope. $ broadcast: Method distribuye el evento hacia abajo (de padre a hijo) a todos los controladores secundarios.

enter image description here $ scope. $ on: El método se registra para escuchar algún evento. Todos los controladores que están escuchando ese evento reciben notificación de la emisión o emiten en función de dónde encajan en la jerarquía de padres y niños.

El evento $ emitir puede ser cancelado por cualquiera de los $ scope que esté escuchando el evento.

$ En proporciona el método “stopPropagation”. Al llamar a este método, el evento puede detenerse para que no se propague más.

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

En el caso de ámbitos hermanos (los ámbitos que no están en la jerarquía directa padre-hijo), $ emitir y $ broadcast no se comunicarán con los ámbitos hermanos.

enter image description here

Para obtener más detalles, consulte http://yogeshtutorials.blogspot.in/2015/12/event-based-communication-between-angularjs-controllers.html

@Eddie ha dado una respuesta perfecta a la pregunta. Pero me gustaría llamar la atención sobre el uso de un enfoque más eficiente de Pub / Sub.

Como sugiere esta respuesta,

El enfoque $ broadcast / $ on no es terriblemente eficiente ya que difunde a todos los ámbitos (ya sea en una dirección o en ambas direcciones de la jerarquía de Scope). Mientras que el enfoque Pub / Sub es mucho más directo. Solo los suscriptores reciben los eventos, por lo que no va a todos los ámbitos del sistema para que funcione.

puede usar el módulo angular angular-PubSub . una vez que agregue el módulo PubSub a la dependencia de su aplicación, puede usar el servicio PubSub para suscribirse y cancelar eventos / temas.

Fácil de suscribir:

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

Fácil de publicar

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

Para darse de baja, use PubSub.unsubscribe(sub); O PubSub.unsubscribe('event-name'); .

NOTA No se olvide de darse de baja para evitar memory leaks.

Use RxJS en un servicio

¿Qué sucede en una situación en la que tiene un Servicio que mantiene el estado, por ejemplo? ¿Cómo podría enviar los cambios a ese Servicio y otros componentes aleatorios en la página estar al tanto de dicho cambio? He estado luchando con abordar este problema últimamente

Crea un servicio con extensiones RxJS para 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); } }; }); 

Entonces simplemente suscríbete a los cambios.

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

Los clientes pueden suscribirse a los cambios con DataService.subscribe y los productores pueden impulsar los cambios con DataService.set .

La DEMO en PLNKR .