eventos - ¿Por qué usamos $ rootScope. $ Broadcast en AngularJS?

eventos angular 4

Question

Intenté encontrar información básica para AngularJS $rootScope.$broadcast , pero la documentación de AngularJS no ayuda mucho. En palabras sencillas, ¿por qué usamos esto?

Además, dentro de la plantilla de John Papa''s Hot Towel hay una función personalizada en el módulo común denominado $broadcast :

function $broadcast() {
    return $rootScope.$broadcast.apply($rootScope, arguments);
}

No entendí lo que está haciendo esto. Así que aquí hay un par de preguntas básicas:

1) ¿Qué hace $rootScope.$broadcast ?

2) ¿Cuál es la diferencia entre $rootScope.$broadcast y $rootScope.$broadcast.apply ?

Answer 1

¡Pasando datos!

$broadcast acepta un parámetro donde puede pasar un Object que será recibido por $on usando una función de devolución de llamada

Ejemplo:

// the object to transfert
var myObject = {
    status : 10
}

$rootScope.$broadcast(''status_updated'', myObject);

$rootScope.$on(''status_updated'', function(event, obj){
    console.log(obj.status); // 10
})

Answer 2

1. ¿Qué hace $rootScope.$broadcast ?

   $rootScope.$broadcast está enviando un evento a través del alcance de la aplicación. Cualquier alcance de los niños de esa aplicación puede atraparlo usando un simple: $scope.$on() .

   Es especialmente útil enviar eventos cuando se quiere llegar a un ámbito que no sea un padre directo (una rama de un padre, por ejemplo)

   !!! Sin embargo, una cosa que no debe hacer es usar $rootScope.$on desde un controlador. $rootScope es la aplicación, cuando se destruye el controlador, el detector de eventos seguirá existiendo y, cuando se vuelva a crear el controlador, simplemente acumulará más detectores de eventos. (Entonces una transmisión será atrapada varias veces). Use $scope.$on() lugar, y los oyentes también serán destruidos.

2. ¿Cuál es la diferencia entre $rootScope.$broadcast & $rootScope.$broadcast.apply ?

   Algunas veces debe usar apply() , especialmente cuando trabaja con directivas y otras bibliotecas JS. Sin embargo, dado que no conozco esa base de código, no podría decir si ese es el caso aquí.

Answer 3

$rootScope básicamente funciona como un detector de eventos y despachador.

Para responder a la pregunta de cómo se usa, se usa junto con rootScope.$on ;

$rootScope.$broadcast("hi");

$rootScope.$on("hi", function(){
    //do something
});

Sin embargo, es una mala práctica usar $rootScope como el servicio de eventos generales de su propia aplicación, ya que terminará rápidamente en una situación en la que cada aplicación depende de $ rootScope, y usted no sabe qué componentes están escuchando qué eventos.

La mejor práctica es crear un servicio para cada evento personalizado que desee escuchar o transmitir.

.service("hiEventService",function($rootScope) {
    this.broadcast = function() {$rootScope.$broadcast("hi")}
    this.listen = function(callback) {$rootScope.$on("hi",callback)}
})

Answer 4

$ rootScope. $ broadcast es una forma conveniente de generar un evento "global" que todos los ámbitos secundarios pueden escuchar. Solo necesita usar $rootScope para transmitir el mensaje, ya que todos los ámbitos descendientes pueden escucharlo.

El alcance raíz difunde el evento:

$rootScope.$broadcast("myEvent");

Cualquier niño Scope puede escuchar el evento:

$scope.$on("myEvent",function () {console.log(''my event occurred'');} );

¿Por qué usamos $ rootScope. $ Broadcast? Puede usar $watch para escuchar cambios de variables y ejecutar funciones cuando el estado de la variable cambia. Sin embargo, en algunos casos, simplemente desea plantear un evento que otras partes de la aplicación puedan escuchar, independientemente de cualquier cambio en el estado de la variable de ámbito. Esto es cuando $broadcast es útil.

Answer 5

¿Qué hace $ rootScope. $ Broadcast?

Transmite el mensaje a los oyentes respectivos en toda la aplicación angular, un medio muy poderoso para transferir mensajes a ámbitos en diferentes niveles jerárquicos (ya sea padre, hijo o hermanos)

Del mismo modo, tenemos $ rootScope. $ Emitir, la única diferencia es que el primero también es capturado por $ scope. $ On mientras que el último solo es captado por $ rootScope. $ On.

consulte ejemplos: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/