Comment les contrôleurs peuvent-ils communiquer entre eux dans AngularJS ?

Communication inter-contrôleurs dans AngularJS

Dans AngularJS, il est possible qu'un contrôleur en appelle un autre. Il existe plusieurs approches pour y parvenir, chacune avec ses propres avantages et cas d'utilisation.

Injection de dépendances

Dans l'exemple fourni, le document HTML utilise le contrôleur MessageCtrl pour afficher un message. Pour transmettre des données d'un autre contrôleur, vous pouvez créer un service qui assure la médiation de la communication.

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

Copier après la connexion

}).
contrôleur('MessageCtrl', ['$scope', 'DataService', fonction($scope, DataService) {

$scope.message = DataService.data.date;

}]).
contrôleur('DateCtrl', ['DataService', fonction(DataService) {

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

}]);

Dans ce scénario, MessageCtrl a accès à le DataService, qui est également utilisé par DateCtrl pour modifier le format de date. Cela garantit une communication synchronisée entre les contrôleurs.

Événements de portée

Une autre méthode consiste à émettre des événements sur la portée. Lorsqu'un événement est émis, tous les contrôleurs qui ont enregistré un écouteur pour cet événement peuvent répondre.

<br>angular.module('myApp', []).<br> contrôleur(' MessageCtrl', ['$scope', fonction($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;
});

Copier après la connexion