Comment puis-je utiliser $on et $broadcast dans AngularJS pour faciliter la communication entre les contrôleurs ?

Propagation d'événements dans Angular : Comprendre $on et $broadcast

Dans les applications AngularJS, la communication entre différents contrôleurs nécessite souvent la propagation de événements. Deux méthodes qui facilitent ce processus sont $on et $broadcast.

$broadcast

$broadcast permet à un contrôleur d'envoyer un événement à tous ses contrôleurs enfants et aux autres contrôleurs qui se sont inscrits pour écouter cet événement. Pour envoyer un événement à l'aide de $broadcast :

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

Le $rootScope est utilisé car il s'agit de la portée parent de toutes les autres portées au sein d'une application Angular.

$on< /h3>

$on permet à un contrôleur d'écouter les événements qui ont été diffusés par d'autres contrôleurs ou par son contrôleur parent. Pour écouter un événement en utilisant $on :

<code class="javascript">$scope.$on('event-name', function(event, args) {
  // Do something when the event is received
});</code>

Le premier paramètre de $on est le nom de l'événement à écouter, et le deuxième paramètre est une fonction de rappel qui sera exécutée lorsque l'événement est reçu. La fonction de rappel peut éventuellement recevoir deux paramètres : 'event' et 'args'.

Example

Considérez la situation décrite dans la question :

<code class="javascript">angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
  $scope.startScanner = function() {
    // Do something when the button is clicked
  };
}]);</code>

Pour activer la communication entre ces contrôleurs, vous pouvez utiliser $broadcast et $on comme suit :

Dans footerController :

<code class="javascript">$scope.startScanner = function() {
  $rootScope.$broadcast('scanner-started');
}</code>

Dans codeScannerController :

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  // Do something when the 'scanner-started' event is received
});</code>

Lorsque vous cliquez sur le bouton dans footerController, l'événement démarré par le scanner sera diffusé. Cet événement sera reçu et géré par le codeScannerController, permettant d'effectuer les actions nécessaires.

Passing Arguments

Vous pouvez également transmettre des arguments avec l'événement en utilisant la méthode $rootScope.$broadcast. Par exemple :

<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>

Ces arguments sont ensuite accessibles dans la fonction de rappel de $on :

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  var anyThing = args.any;
  // Do what you want to do
});</code>

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!