Beispielanalyse des Kommunikationsmechanismus zwischen Controllern in Angularjs

Das Beispiel in diesem Artikel beschreibt den Kommunikationsmechanismus zwischen Controllern in AngularJS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In einigen Erfahrungszusammenfassungen in der Angularjs-Entwicklung wurde erwähnt, dass wir Angular-Controller nach Geschäft unterscheiden müssen, um den übermäßig großen und allmächtigen Gott-Controller zu vermeiden .Aber manchmal müssen wir im Controller kommunizieren, was normalerweise ein relativ einfacher Kommunikationsmechanismus ist. Sagen Sie dem Begleiter-Controller, dass sich etwas geändert hat. Wenn Sie ein JavaScript-Programmierer sind, denken Sie natürlich an asynchrone Callback-reaktive Kommunikation – Ereignismechanismus (oder Nachrichtenmechanismus). Ja, dies ist der Mechanismus von AngularJS, um die Kommunikation zwischen Controllern zu lösen. Kurz gesagt, dies ist der Angular-Weg.

Angularjs bietet uns Bubbling- und Tunneling-Mechanismen im Bereich $broadcast, der das Ereignis an alle untergeordneten Controller sendet, während $emit das Ereignis bubbelt und an den übergeordneten Controller weiterleitet Mit dieser Funktion können wir die Kommunikation zwischen AngularJS-Controllern schnell auf die AngularJS-Art lösen. Der Code lautet wie folgt:

<div ng-app="app" ng-controller="parentCtr">
  <div ng-controller="childCtr1">name :
    <input ng-model="name" type="text" ng-change="change(name);" />
  </div>
  <div ng-controller="childCtr2">Ctr1 name:
    <input ng-model="ctr1Name" />
  </div>
</div>

Controller:

angular.module("app", []).controller("parentCtr",
function ($scope) {
  $scope.$on("Ctr1NameChange",
  function (event, msg) {
    console.log("parent", msg);
    $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  });
}).controller("childCtr1", function ($scope) {
  $scope.change = function (name) {
    console.log("childCtr1", name);
    $scope.$emit("Ctr1NameChange", name);
  };
}).controller("childCtr2", function ($scope) {
  $scope.$on("Ctr1NameChangeFromParrent",
  function (event, msg) {
    console.log("childCtr2", msg);
    $scope.ctr1Name = msg;
  });
});

Hier wird die Namensänderung von childCtr1 an den übergeordneten Controller weitergeleitet, und der übergeordnete Controller umschließt das Ereignis und sendet es es an alle untergeordneten Controller weiter, während childCtr2 das Änderungsereignis registriert und sich selbst ändert. Beachten Sie, dass der übergeordnete Controller den Ereignisnamen beim Senden ändern muss.

jsfiddle-Link: http://jsfiddle.net/whitewolf/5JBA7/15/

Ich hoffe, dass dieser Artikel für alle in der AngularJS-Programmierung hilfreich sein wird.