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>
<pre class="brush:php;toolbar:false">this.data = { date: new Date().toString() };

}).
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>
<pre class="brush:php;toolbar:false">$scope.$on('dateUpdated', function(event, newDate) {
  $scope.message = newDate;
});

}]).
contrôleur('DateCtrl', ['$scope', function($scope) {

$scope.$emit('dateUpdated', 'Custom date format');

}]);

Dans cet exemple, DateCtrl émet un événement que MessageCtrl écoute et auquel il répond en mettant à jour son message. Cela permet un modèle de communication plus réactif.

Ce ne sont là que quelques-unes des façons d'établir une communication entre contrôleurs dans AngularJS. La meilleure approche dépend des exigences spécifiques de votre application.

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!