Wie können Controller in AngularJS miteinander kommunizieren?

Inter-Controller-Kommunikation in AngularJS

In AngularJS ist es möglich, dass ein Controller einen anderen aufruft. Es gibt mehrere Ansätze, um dies zu erreichen, jeder mit seinen eigenen Vorteilen und Anwendungsfällen.

Abhängigkeitsinjektion

Im bereitgestellten Beispiel verwendet das HTML-Dokument den MessageCtrl-Controller, um eine Nachricht anzuzeigen. Um Daten von einem anderen Controller zu übergeben, könnten Sie einen Dienst erstellen, der die Kommunikation vermittelt.

<br>angular.module('myApp', []).<br> service('DataService' , function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.data = { date: new Date().toString() };

Nach dem Login kopieren

}).
controller('MessageCtrl', ['$scope', 'DataService', function($scope, DataService) {

$scope.message = DataService.data.date;

}]).
controller('DateCtrl', ['DataService', function(DataService) {

DataService.data.date = 'Custom date format';

} ]);

In diesem Szenario hat MessageCtrl Zugriff auf den DataService, der auch von DateCtrl verwendet wird um das Datumsformat zu ändern. Dies stellt eine synchronisierte Kommunikation zwischen den Controllern sicher.

Scope-Ereignisse

Eine andere Methode besteht darin, Ereignisse auf dem Scope auszugeben. Wenn ein Ereignis ausgegeben wird, können alle Controller antworten, die einen Listener für dieses Ereignis registriert haben.

<br>angular.module('myApp', []).<br> controller(' MessageCtrl', ['$scope', function($scope) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$scope.$on('dateUpdated', function(event, newDate) {
  $scope.message = newDate;
});

Nach dem Login kopieren