web-dev-qa-db-fra.com

Pourquoi utilisons-nous $ rootScope. $ Broadcast dans AngularJS?

J'ai essayé de trouver des informations de base sur AngularJS $rootScope.$broadcast, mais la documentation d'AngularJS n'aide pas beaucoup. En termes simples, pourquoi utilisons-nous cela?

En outre, le modèle Hot Towel de John Papa contient une fonction personnalisée dans le module commun nommé $broadcast:

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

Je n'ai pas compris ce que ça fait. Donc, voici quelques questions de base:

1) Que fait $rootScope.$broadcast?

2) Quelle est la différence entre $rootScope.$broadcast et $rootScope.$broadcast.apply?

angularjsrootscope
103
Nexus23

  1. Que fait $rootScope.$broadcast?

    $rootScope.$broadcast envoie un événement via la portée de l'application. Toute portée d'enfants de cette application peut l'attraper en utilisant un simple: $scope.$on().

    Il est particulièrement utile d'envoyer des événements lorsque vous souhaitez atteindre une étendue qui n'est pas un parent direct (une branche d'un parent par exemple).

    !!! Une chose à ne pas faire est cependant d’utiliser $rootScope.$on depuis un contrôleur. $rootScope est l'application, lorsque votre contrôleur sera détruit, cet écouteur d'événements existera toujours et, lorsque votre contrôleur sera créé à nouveau, il n'empilera plus d'écouteurs d'événements. (Donc, une émission sera capturée plusieurs fois). Utilisez $scope.$on() à la place, et les écouteurs seront également détruits.

  2. Quelle est la différence entre $rootScope.$broadcast & $rootScope.$broadcast.apply?

    Parfois, vous devez utiliser apply(), en particulier lorsque vous travaillez avec des directives et d'autres bibliothèques JS. Cependant, comme je ne connais pas cette base de code, je ne saurais dire si c'est le cas ici.

85
user1412031

$rootScope fonctionne essentiellement comme un écouteur et un répartiteur d'événements.

Pour répondre à la question de savoir comment il est utilisé, il est utilisé conjointement avec rootScope.$on;

$rootScope.$broadcast("hi");

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

Cependant, il est déconseillé d'utiliser $rootScope comme service d'événements général de votre propre application, car vous vous retrouverez rapidement dans une situation où chaque application dépend de $ rootScope, et vous ne savez pas quels composants écoutent ce événements.

La meilleure pratique consiste à créer un service pour chaque événement personnalisé que vous souhaitez écouter ou diffuser.

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

$ rootScope. $ broadcast est un moyen pratique de générer un événement "global" que toutes les étendues enfants peuvent écouter. Il vous suffit d'utiliser $rootScope pour diffuser le message, car toutes les étendues descendantes peuvent l'écouter.

L'étendue racine diffuse l'événement: 

$rootScope.$broadcast("myEvent");

Tout enfant Scope peut écouter l'événement: 

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

Pourquoi utilisons-nous $ rootScope. $ Broadcast? Vous pouvez utiliser $watch pour écouter les modifications de variable et exécuter des fonctions lorsque l'état de la variable change. Toutefois, dans certains cas, vous souhaitez simplement déclencher un événement que d'autres parties de l'application peuvent écouter, quel que soit le changement d'état de la variable de portée. C'est à ce moment que $broadcast est utile.

32
James Lawruk

Passing data !!!

Je me demande pourquoi personne ne mentionne que $broadcast accepte un paramètre dans lequel vous pouvez transmettre un Object qui sera reçu par $on à l'aide d'une fonction de rappel.

Exemple:

// 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
})
14
Merlin

Que fait $ rootScope. $ Broadcast?

Il diffuse le message aux auditeurs respectifs partout dans l'application angular, un moyen très puissant de transférer des messages vers des portées à différents niveaux hiérarchiques (parents, enfants ou frères et sœurs).

De même, nous avons $ rootScope. $ Emit, la seule différence est que le premier est également capturé par $ scope. $ On tandis que le dernier est capturé par seulement $ rootScope. $ On.

se référer à des exemples: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

8
Prashant K