Wie kann ich $on und $broadcast in AngularJS verwenden, um die Kommunikation zwischen Controllern zu erleichtern?

Ereignisweitergabe in Angular: $on und $broadcast verstehen

In AngularJS-Anwendungen erfordert die Kommunikation zwischen verschiedenen Controllern häufig die Weitergabe von Ereignisse. Zwei Methoden, die diesen Prozess erleichtern, sind $on und $broadcast.

$broadcast

$broadcast ermöglicht einem Controller, ein Ereignis an alle seine untergeordneten Controller zu senden an andere Controller, die sich registriert haben, um auf dieses Ereignis zu warten. So senden Sie ein Ereignis mit $broadcast:

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

Der $rootScope wird verwendet, da er der übergeordnete Bereich aller anderen Bereiche innerhalb einer Angular-Anwendung ist.

$on< /h3>

$on ermöglicht einem Controller, auf Ereignisse zu warten, die von anderen Controllern oder seinem übergeordneten Controller gesendet wurden. So warten Sie mit $on auf ein Ereignis:

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

Der erste Parameter von $on ist der Name des Ereignisses, auf das gewartet werden soll, und der zweite Parameter ist eine Rückruffunktion, die ausgeführt wird, wenn das Ereignis eintritt erhalten. Die Callback-Funktion kann optional zwei Parameter empfangen: „event“ und „args“.

Beispiel

Betrachten Sie die in der Frage beschriebene Situation:

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

Um die Kommunikation zwischen diesen Controllern zu ermöglichen, können Sie $broadcast und $on wie folgt verwenden:

Im FooterController:

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

Im CodeScannerController:

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

Wenn im FooterController auf die Schaltfläche geklickt wird, wird das Scanner-gestartet-Ereignis übertragen. Dieses Ereignis wird vom codeScannerController empfangen und verarbeitet, sodass die erforderlichen Aktionen ausgeführt werden können.

Übergabe von Argumenten

Sie können auch Argumente zusammen mit dem Ereignis übergeben mit der Methode $rootScope.$broadcast. Zum Beispiel:

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

Auf diese Argumente kann dann in der Callback-Funktion von $on zugegriffen werden:

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

Das obige ist der detaillierte Inhalt vonWie kann ich $on und $broadcast in AngularJS verwenden, um die Kommunikation zwischen Controllern zu erleichtern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!