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


109

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

De plus, à l'intérieur du modèle Hot Towel de John Papa, il y a 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 cela faisait. Voici donc quelques questions de base:

1) Que fait $rootScope.$broadcast-on?

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




$rootScope.$broadcast.apply()est utilisé car si vous souhaitez passer l' argumentsobjet spécial à une autre fonction, vous devez utiliser apply()(par opposition à call()). En plus du lien de @ Blackhole vers la page MDN sur Apply, vous pouvez également consulter l'entrée sur arguments.
Scott Schupbach

Réponses:


97
  1. Que fait $rootScope.$broadcast-on?

    $rootScope.$broadcastenvoie un événement via l'étendue de l'application. Tous les enfants portée de cette application peut attraper l' aide d' un simple: $scope.$on().

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

    !!! Une chose à ne pas faire cependant est d'utiliser à $rootScope.$onpartir d'un contrôleur. $rootScopeest l'application, lorsque votre contrôleur est détruit, cet écouteur d'événements existera toujours, et lorsque votre contrôleur sera de nouveau créé, il empilera simplement plus d'écouteurs d'événements. (Ainsi, une émission sera capturée plusieurs fois). Utilisez à la $scope.$on()place, et les auditeurs 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 pourrais pas dire si c'est le cas ici.


11
Grande prise sur la $rootScope.$onfuite de mémoire. Cela s'applique également à la réponse acceptée, car les contrôleurs sont susceptibles d'appeler la réponse hiEventServicequ'il a créée.
adamdport

Quel est un exemple où vous utiliseriez $broadcastvs.$broadcast.apply()
guest

$ rootScope. $ broadcast envoie l'événement à tous les écouteurs, pas seulement aux écouteurs des portées enfants. $ scope. $ broadcast limite l'événement aux scopes enfants
Geert Bellemans

157

$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é en conjonction avec rootScope.$on;

$rootScope.$broadcast("hi");

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

Cependant, c'est une mauvaise pratique à utiliser $rootScopecomme 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 quels é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)}
})

4
Merci @itcouldevenbeabout Cette ligne n'appelle-t-elle pas la même logique d'attacher un événement à global $ rootScope? function () {$ rootScope. $ broadcast ("hi")}, ce que vous avez mentionné est une mauvaise pratique?
Nexus23

11
L'utilisation d'un service pour faire les diffusions et également attacher les auditeurs pour un événement spécifique évite la situation où vous ne savez pas qui écoute. Il devient clair quels composants ont le service d'événements en tant que dépendance
CoolTapes

4
Ayant juste découvert la différence entre $ emit et $ broadcast, je serais enclin à dire qu'il serait préférable de $ émettre l'événement - de cette façon vous pollueriez l'événement dans le plus petit ensemble de portées possible (idéalement, le service aurait c'est sa propre portée, mais je ne pense pas que ce soit possible?)
Brondahl

3
-1. Je ne vois pas à quel point l'isolement dans un service est meilleur que la simple diffusion. Quoi qu'il en soit, mieux vaut utiliser sa propre portée privée dans le service. Et mieux vaut utiliser $ emit, et non $ broadcast. De plus, le service proposé ne prend pas en charge les arguments d'événement. Ce qui est pire, il ne prend pas en charge la désinscription; un péché mortel pour $ rootScope.
alpha-mouse

3
L'absence de désinscription ruine cette réponse pour moi. Si vous appelez hiEventService.listen(callback)depuis un contrôleur, l'auditeur existera toujours même après la destruction du contrôleur. Fuite de mémoire! La liaison à la portée du contrôleur $scope.$on("hi",callback)est fournie avec un nettoyage automatique.
adamdport

32

$ rootScope. $ broadcast est un moyen pratique de déclencher un événement "global" que toutes les portées enfants peuvent écouter. Vous devez uniquement l'utiliser $rootScopepour diffuser le message, car toutes les étendues descendantes peuvent l'écouter.

La portée 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 $watchpour écouter les changements 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 d'étendue. C'est là que cela $broadcastest utile.


19

Passer des données !!!

Je me demande pourquoi personne ne mentionne qui $broadcastaccepte un paramètre où vous pouvez passer un Objectqui sera reçu en $onutilisant une fonction de rappel

Exemple:

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

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

8

Que fait $ rootScope. $ Broadcast?

Il diffuse le message aux auditeurs respectifs dans toute l'application angulaire, un moyen très puissant de transférer des messages vers des étendues à différents niveaux hiérarchiques (que ce soit un parent, un enfant ou un frère ou une sœur)

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

voir des exemples: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.