Detaillierte Erläuterung der Kommunikationsmethoden zwischen AngularJS-Controllern

Die Beispiele in diesem Artikel beschreiben die Kommunikationsmethoden zwischen AngularJS-Controllern. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt:

1. Verwenden der Bereichsvererbung

Da die Bereichsvererbung auf der Prototyp-Vererbungsmethode von js basiert, gibt es hier zwei Situationen. Wenn der Wert im Bereich ein Basistyp ist, wirkt sich die Änderung des Werts im übergeordneten Bereich auf den untergeordneten Bereich aus. Im Gegensatz dazu wirkt sich die Änderung des untergeordneten Bereichs nur auf den Wert im untergeordneten Bereich und nicht auf den Wert im untergeordneten Bereich aus übergeordneter Bereich. Wenn Sie einen gemeinsamen Wert zwischen dem übergeordneten Bereich und dem untergeordneten Bereich benötigen, müssen Sie den letzteren verwenden, d. h. der Wert im Bereich ist ein Objekt, und Änderungen auf beiden Seiten können sich auf den anderen auswirken. Dies liegt daran, dass Objekte in js alle Referenztypen sind.

Grundtyp

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.move = function(newLocation) {
    $scope.location = newLocation;
  }
}
function Droid($scope) {
  $scope.sell = function(newLocation) {
    $scope.location = newLocation;
  }
}

html:

<p ng-controller="Sandcrawler">
  <p>Location: {{location}}</p>
  <button ng-click="move(&#39;Mos Eisley South&#39;)">Move</button>
  <p ng-controller="Droid">
    <p>Location: {{location}}</p>
    <button ng-click="sell(&#39;Owen Farm&#39;)">Sell</button>
  </p>
</p>

Objekt

function Sandcrawler($scope) {
  $scope.obj = {location:"Mos Eisley North"};
}
function Droid($scope) {
  $scope.summon = function(newLocation) {
    $scope.obj.location = newLocation;
  }
}

html:

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <p ng-controller="Droid">
    <button ng-click="summon(&#39;Owen Farm&#39;)">
      Summon Sandcrawler
    </button>
  </p>
</p>

2. Ereignisbasierter Ansatz

Im Allgemeinen ist der vererbungsbasierte Ansatz für die meisten Situationen ausreichend, aber dieser Ansatz implementiert keine Kommunikation zwischen Geschwister-Controllern führt zum Weg der Ereignisse. Im ereignisbasierten Ansatz können wir es auf folgende Weise implementieren: $on, $emit und $boardcast. $on steht für die Ereignisüberwachung, $emit steht für das Auslösen von Ereignissen an den Bereich über dem übergeordneten Element und $boardcast steht für die Berichterstattung an das Kind. Ereignisse an Bereiche unterhalb der Ebene übertragen. Beziehen Sie sich auf den folgenden Code:

Ereignisse nach oben propagieren

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.$on('summon', function(e, newLocation) {
    $scope.location = newLocation;
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.summon = function() {
    $scope.$emit('summon', $scope.location);
  }
}

html:

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <p ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
    <button ng-click="summon()">Summon Sandcrawler</button>
  </p>
</p>

Veranstaltung übertragen

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.recall = function() {
    $scope.$broadcast('recall', $scope.location);
  }
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.$on('recall', function(e, newLocation) {
    $scope.location = newLocation;
  });
}

html:

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <button ng-click="recall()">Recall Droids</button>
  <p ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
  </p>
</p>

Aus dieser Verwendung können wir eine Methode für die Kommunikation zwischen Geschwistersteuerelementen ableiten. Zuerst lösen wir ein Ereignis für den übergeordneten Bereich in einem Geschwistersteuerelement aus für das Ereignis im übergeordneten Bereich und senden Sie es an den untergeordneten Bereich. Auf diese Weise können die Daten über die vom Ereignis übertragenen Parameter über den übergeordneten Bereich und zwischen Geschwisterbereichen weitergegeben werden. Hierbei ist zu beachten, dass, wenn das Ereignis als Vermittler über das übergeordnete Element geleitet wird, die von den Geschwisterelementen verwendeten Ereignisnamen nicht identisch sein dürfen, da es sonst in eine Endlosschleife gerät. Bitte schauen Sie sich den Code an:

Weitergabe zwischen Geschwisterbereichen

function Sandcrawler($scope) {
  $scope.$on('requestDroidRecall', function(e) {
    $scope.$broadcast('executeDroidRecall');
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.recallAllDroids = function() {
    $scope.$emit('requestDroidRecall');
  }
  $scope.$on('executeDroidRecall', function() {
    $scope.location = "Sandcrawler"
  });
}

html:

<p ng-controller="Sandcrawler">
  <p ng-controller="Droid">
    <h2>R2-D2</h2>
    <p>Droid Location: {{location}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </p>
  <p ng-controller="Droid">
    <h2>C-3PO</h2>
    <p>Droid Location: {{status}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </p>
</p>

3. Die Art und Weise des Winkeldienstes

In ng ist der Dienst ein Singleton, sodass ein Objekt im Dienst generiert wird, und das Objekt Kann verwendet werden. Die Abhängigkeitsinjektionsmethode wird von allen Controllern gemeinsam genutzt. Sehen Sie sich das folgende Beispiel an: Der Wert des Serviceobjekts wird in einem Controller geändert und der geänderte Wert wird in einem anderen Controller erhalten:

var app = angular.module('myApp', []);
app.factory('instance', function(){
  return {};
});
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
    instance.name = $scope.test;
 };
});
app.controller('sideCtrl', function($scope, instance) {
  $scope.add = function() {
    $scope.name = instance.name;
  };
});

html：

<p ng-controller="MainCtrl">
   <input type="text" ng-model="test" />
   <p ng-click="change()">click me</p>
</p>
<p ng-controller="sideCtrl">
  <p ng-click="add()">my name {{name}}</p>
</p>

Das Obige ist eine detaillierte Erläuterung der Kommunikationsmethoden zwischen AngularJS-Controllern. Weitere verwandte Inhalte finden Sie hier PHP Chinese Net (www.php.cn)!