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?

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.

$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)}
})

$ 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.

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

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/