Comment les contrôleurs AngularJS peuvent-ils communiquer sans imbrication ?

Communication entre les contrôleurs angulaires

Dans AngularJS, faciliter la communication entre les contrôleurs est souvent nécessaire. Cependant, accéder aux variables d'un contrôleur à l'autre pose un défi lorsque les contrôleurs ne sont pas imbriqués.

Passer des variables sans héritage

Passer le premier contrôleur (Ctrl1) en tant que argument au deuxième contrôleur (Ctrl2) utilisant $scope, Ctrl1 n'est pas viable en raison d'erreurs non définies. De même, hériter des propriétés de Ctrl1 à Ctrl2 en utilisant Ctrl2.prototype = new Ctrl1(); échoue également.

Solution : Utiliser les services

Pour partager des variables entre les contrôleurs sans imbrication, la solution efficace consiste à créer un service et à l'injecter dans tous les contrôleurs concernés. Un service est un composant angulaire qui peut être injecté dans plusieurs contrôleurs ou directives pour partager des fonctionnalités.

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

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

En injectant le service sharedProperties dans les deux contrôleurs, les données partagées peuvent être accessible et modifié indépendamment.

Liaison aux valeurs partagées

En plus d'accéder aux valeurs partagées, il est également possible de s'y lier dans la portée du contrôleur. Pour conserver la référence liée, il est recommandé de se lier à la propriété d'un objet au lieu d'un type primitif.

var property = { Property1: 'First' };

// Binded to a static copy in Ctrl1
$scope.prop11 = property.Property1;

// Binded to the shared value in Ctrl2
$scope.prop12 = sharedProperties.getProperty().Property1;

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!