AngularjsにおけるController間の通信機構の解析例

この記事の例では、Angularjs のコントローラー間の通信メカニズムについて説明します。参考までに皆さんと共有してください。詳細は次のとおりです。

Angularjs 開発のいくつかの経験の要約では、大きすぎる全能のゴッド コントローラーを避けるために、ビジネスに応じて Angular コントローラーを区別する必要があると述べられていました。ですが、場合によってはコントローラー内で通信​​する必要があります。これは通常、比較的単純な通信メカニズムです。気になる点が変更されたことをコンパニオン コントローラーに伝えます。あなたが JavaScript プログラマーであれば、非同期コールバックのリアクティブ通信、つまりイベント メカニズム (またはメッセージ メカニズム) を自然に考えるでしょう。はい、これはコントローラー間の通信を解決するための angularjs のメカニズムです。つまり、これが angular の唯一の方法です。

Angularjs はスコープ内でバブリングとトンネリングのメカニズムを提供します。$broadcast はイベントをすべての子コントローラーにブロードキャストし、$on はイベントをバブリングして親コントローラーに渡します。これらを使用すると、angularjs の方法で angularjs コントローラー間の通信をすばやく解決できます。 コードは次のとおりです。

View:

<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;
  });
});

名前の変更は次のようになります。親コントローラにバブルされ、親コントローラはイベントをラップしてすべての子コントローラにブロードキャストします。一方、childCtr2 は変更イベントを登録して自身を変更します。親コントローラーはブロードキャスト時にイベント名を変更する必要があることに注意してください。

jsfiddle リンク: http://jsfiddle.net/whitewolf/5JBA7/15/

この記事が AngularJS プログラミングのすべての人に役立つことを願っています。