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

Partage de variables entre les contrôleurs AngularJS

Comprendre le problème

Dans AngularJS, les contrôleurs sont des étendues isolées, ce qui signifie qu'ils n'ont pas d'accès direct aux variables déclaré dans d’autres contrôleurs. Cela peut présenter un défi lors du partage de données entre plusieurs contrôleurs.

Approche basée sur les services

Une solution courante à ce problème consiste à utiliser un service. Les services sont partagés dans toute l’application et peuvent être injectés dans n’importe quel contrôleur. Ils sont responsables de la détention et de la gestion des données à partager.

Exemple de service :

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

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

Utilisation dans le contrôleur :

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

Liaison de données à un objet partagé

Parfois, il peut être utile de lier données à la propriété d’un objet au sein d’un service. Cela garantit que les modifications apportées à l'objet sont propagées aux composants de l'interface utilisateur qui lui sont liés.

Exemple de service avec objet :

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

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

Utilisation dans le contrôleur :

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = "Second";
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
  sharedProperties.setProperty($scope.both); // Update service property when UI changes
}

En exploitant les services et en liant les données aux objets, vous pouvez partager efficacement des variables entre AngularJS contrôleurs et maintenir la cohérence des données dans toute 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!