Comment puis-je partager efficacement des données entre les contrôleurs AngularJS ?

Partage de données entre les contrôleurs AngularJS

AngularJS est un framework populaire pour créer des applications d'une seule page. Il est souvent nécessaire de partager des données entre contrôleurs. Un exemple courant est un formulaire en plusieurs étapes dans lequel les données saisies en une seule étape sont ensuite utilisées à plusieurs endroits.

Le problème

Considérez le code suivant :

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName">
    <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){
    var FirstName = '';
    return FirstName;
});

myApp.controller('FirstCtrl', function( $scope, Data ){

});

myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

Dans ce code, les données saisies dans le champ de saisie du contrôleur FirstCtrl ne sont pas automatiquement mises à jour dans le contrôleur SecondCtrl. En effet, la fabrique de données renvoie une valeur primitive (FirstName est une chaîne), pas une référence d'objet.

La solution

Une solution simple consiste à avoir la fabrique renvoyer un objet et laisser les contrôleurs travailler avec une référence au même objet :

myApp.factory('Fact', function(){
  return { Field: '' };
});

myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
    <input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

Avec cette approche, les deux contrôleurs partagent une référence au même objet, et les modifications apportées à l'objet dans un contrôleur sont automatiquement reflétées dans l'autre contrôleur.

Options avancées

Pour des scénarios plus complexes, vous pouvez utiliser des getters et des setters pour contrôler accès aux données partagées. Cette approche vous donne plus de contrôle sur la façon dont les données sont mises à jour et peut aider à prévenir les erreurs.

Conclusion

Le partage de données entre les contrôleurs AngularJS est une tâche courante. En comprenant les différentes techniques disponibles, vous pouvez choisir l'approche qui correspond le mieux aux besoins 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!