event - angularjs rootscope on example

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

Question

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

Son diferentes, sí.

$emit está restringido a la jerarquía de alcance (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, que 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 busco. $scope.$emit envía el evento hacia arriba, y $scope.$broadcast - downward. Pero, ¿por qué no siempre usa $rootScope.$broadcast para llegar a todos los oyentes previstos?

Answer 1

Usa RxJS en un servicio

¿Qué pasa en una situación en la que tiene un servicio que mantiene el estado, por ejemplo? ¿Cómo podría impulsar cambios en ese Servicio y que otros componentes aleatorios en la página sean conscientes de tal cambio? He estado luchando con abordar este problema últimamente

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

Entonces simplemente suscríbase 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 .

Answer 2

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

Como sugiere this respuesta,

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

Puede utilizar el módulo angular-PubSub angular. una vez que agregue el módulo PubSub a la dependencia de su aplicación, puede usar el servicio PubSub para suscribirse y cancelar la suscripción de 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 cancelar la suscripción, use PubSub.unsubscribe(sub); O PubSub.unsubscribe(''event-name''); .

NOTA No olvide darse de baja para evitar pérdidas de memoria.

Answer 3

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

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

Además, el efecto burbujeante de $rootScope.$broadcast puede cancelarse, mientras que $rootScope.$broadcast no puede cancelarse.

Answer 4

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

Answer 5

$ scope. $ emit: este método distribuye el evento en sentido ascendente (de hijo a padre)

$ scope. $ broadcast: el método distribuye el evento en sentido descendente (de padres a hijos) a todos los controladores secundarios.

$ scope. $ on: El método se registra para escuchar algún evento. Todos los controladores que escuchan ese evento reciben una notificación de la emisión o emisión según el lugar en el que encajan en la jerarquía de elementos primarios y secundarios.

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

El $ en proporciona el método "stopPropagation". Al llamar a este método, se puede evitar que el evento se siga propagando.

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

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

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

Answer 6

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

$emit envía un evento hacia arriba ... $broadcast envía un evento hacia abajo

Explicación detallada

$rootScope.$emit solo permite que otros oyentes de $rootScope . Esto es bueno cuando no quieres que cada $scope para obtenerlo. Principalmente una comunicación de alto nivel. Piense en ello como adultos hablando entre ellos en una habitación para que los niños no puedan escucharlos.

$rootScope.$broadcast es un método que permite que casi todo lo escuche. Esto sería el equivalente 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 la casa (pero no en una tienda de abarrotes donde otros niños pueden escuchar).

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