Wie können AngularJS-Controller ohne Verschachtelung kommunizieren?

Kommunikation zwischen Angular-Controllern

In AngularJS ist es oft notwendig, die Kommunikation zwischen Controllern zu erleichtern. Der Zugriff auf Variablen von einem Controller innerhalb eines anderen stellt jedoch eine Herausforderung dar, wenn die Controller nicht verschachtelt sind.

Variablen ohne Vererbung übergeben

Übergabe des ersten Controllers (Strg1) als Argument an den zweiten Controller (Strg2) mit $scope, Strg1 ist aufgrund undefinierter Fehler nicht möglich. Ähnlich verhält es sich mit der Vererbung von Eigenschaften von Strg1 auf Strg2 mithilfe von Strg2.prototype = new Strg1(); ist ebenfalls erfolglos.

Lösung: Nutzung von Diensten

Um Variablen über Controller hinweg ohne Verschachtelung zu teilen, besteht die effektive Lösung darin, einen Dienst zu erstellen und ihn in alle relevanten Controller einzuschleusen. Ein Dienst ist eine Angular-Komponente, die in mehrere Controller oder Anweisungen eingefügt werden kann, um die Funktionalität zu teilen.

Beispieldienst:

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

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

Verwendung in Controllern:

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('New First');
}

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

Durch die Einbindung des sharedProperties-Dienstes in beide Controller können die gemeinsam genutzten Daten übertragen werden unabhängig voneinander aufgerufen und geändert werden.

Bindung an gemeinsame Werte

Zusätzlich zum Zugriff auf gemeinsame Werte ist es auch möglich, sich im Geltungsbereich des Controllers an sie zu binden. Um die gebundene Referenz beizubehalten, wird empfohlen, eine Bindung an die Eigenschaft eines Objekts statt an einen primitiven Typ vorzunehmen.

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;

Das obige ist der detaillierte Inhalt vonWie können AngularJS-Controller ohne Verschachtelung kommunizieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!