Comment $on et $broadcast activent-ils la communication d'événements dans Angular ?

Communication d'événements avec $on et $broadcast dans Angular

Angular fournit deux méthodes fondamentales de communication d'événements, $on et $broadcast, qui permettent aux composants d'une application de communiquer les uns avec les autres. Comprendre le fonctionnement de ces méthodes est crucial pour une gestion efficace des événements dans les applications Angular.

$broadcast
Lorsqu'un événement se produit dans un contrôleur, comme cliquer sur un élément dans footer.html dans le footerController, il peut être diffusé vers d’autres parties de l’application à l’aide de $broadcast. Cette méthode prend un nom d'événement et des arguments facultatifs comme paramètres.

<code class="javascript">$rootScope.$broadcast('scanner-started');</code>

$on
D'autres composants peuvent s'abonner à ces événements en utilisant $on. Cette méthode prend un nom d'événement et une fonction de rappel comme paramètres. Lorsque l'événement est diffusé, la fonction de rappel est déclenchée, donnant accès à tous les arguments passés avec $broadcast.

<code class="javascript">$scope.$on('scanner-started', function(event, args) {

    // do what you want to do
});</code>

Exemple
Considérez le codeScannerController qui nécessite un événement startScanner pour commencez à scanner un code. Le footerController peut déclencher cet événement lorsqu'un élément est cliqué.

<code class="javascript">// In footerController
$scope.startScanner = function() {

    $rootScope.$broadcast('scanner-started', { any: {} });
}

// In codeScannerController
$scope.$on('scanner-started', function(event, args) {

    var anything = args.any;
    // do what you want to do
});</code>

Usage
$on et $broadcast sont couramment utilisés pour faciliter la communication entre différents composants, comme entre contrôleurs, services et directives. Ils permettent de déclencher et de gérer des événements dans l'ensemble de l'application, permettant une conception faiblement couplée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!