Comment puis-je partager efficacement des variables entre les contrôleurs AngularJS ?

Partage de variables entre les contrôleurs AngularJS

Les applications AngularJS nécessitent souvent la transmission de variables entre les contrôleurs pour faciliter la communication et le partage de données. Cependant, accéder aux variables à partir d'un autre contrôleur peut poser un défi.

L'approche traditionnelle

Dans un scénario idéal, vous pourriez tenter d'accéder directement à une variable à partir d'un autre contrôleur. Cependant, cette approche échoue à moins que les contrôleurs ne soient liés via le modèle d'héritage hiérarchique $scope.

Solution : utiliser les services

Une solution plus efficace consiste à utiliser les services, qui sont partagés entre tous les contrôleurs. En enregistrant un service auprès de votre application et en l'injectant dans les contrôleurs souhaités, vous pouvez accéder à ses propriétés et méthodes pour échanger des données.

Exemple de service :

angular.module('myApp').service('sharedProperties', function () {
  var property = 'First';

  return {
    getProperty: function () {
      return property;
    },
    setProperty: function (value) {
      property = value;
    },
  };
});

Utilisation dans les contrôleurs :

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('Updated Value');
}

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = 'Second';
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

Liaison à Propriétés

Pour garantir que les valeurs partagées mettent à jour dynamiquement l'interface utilisateur, envisagez de vous lier à la propriété d'un objet plutôt qu'à un type primitif. Cela permet de conserver la référence tout au long de l'application.

Exemple :

// Replace 'var property = 'First';' with
var property = { Property1: 'First' };

Ressources supplémentaires

• [Variables de liaison dans AngularJS](https://jasonwatmore.com/post/2014/08/14/AngularJS-bind-to-same-variable-in-multiple-scopes-controllers)

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!