AngularJSコントローラー間の通信方法の詳細説明

この記事の例では、AngularJS コントローラー間の通信方法について説明します。参考までに皆さんに共有してください。詳細は以下の通りです:

1. スコープの継承メソッドを使用します

スコープの継承は js のプロトタイプ継承メソッドに基づいているため、ここでは 2 つの状況が発生します。基本型の場合、親スコープの値を変更すると子スコープに影響します。逆に、子スコープの値を変更すると、子スコープの値にのみ影響し、親スコープの値には影響しません。親スコープが必要であり、サブスコープが値を共有する場合は後者を使用する必要があります。つまり、スコープのどちらかの側での変更はもう一方の側に影響を与える可能性があるためです。種類。

基本型

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>

オブジェクト

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

html： reee

2. In におけるイベントベースのアプローチ

一般に、ほとんどの状況では継承ベースのメソッドで十分ですが、このメソッドは兄弟コントローラー間の通信を実装していないため、イベント メソッドが導入されます。イベントベースのアプローチでは、$on、$emit、$boardcast の方法で実装できます。$on はイベントの監視を表し、$emit は親より上位のスコープへのイベントのトリガーを表し、$boardcast はレポートを表します。子。レベルの下のスコープにイベントをブロードキャストします。次のコードを参照してください:

ブロードキャスト イベント アップ

<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>

html:

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

ブロードキャスト イベント ダウン

<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>

html：

りー

この使用法から、兄弟コントロール間の通信方法を派生できます。まず、兄弟コントロールの親スコープに対してイベントをトリガーし、次に親スコープでイベントをリッスンして、それを子スコープにブロードキャストします。このようにして、イベントによって運ばれるパラメータは、親スコープを介した兄弟スコープ間のデータの伝播を実現します。ここで注意したいのは、親要素を仲介としてイベントを渡す場合、兄弟要素で使用するイベント名を同じにすることはできず、同じにしないと無限ループに陥ってしまうということです。コードをご覧ください：sibling兄弟スコープ間の伝播サービス内でオブジェクトを生成します。このオブジェクトは、依存関係の注入を使用してすべてのコントローラー間で共有できます。次の例を参照してください。サービス オブジェクトの値は 1 つのコントローラーで変更され、変更された値は別のコントローラーで取得されます。コントロール サーバー間の通信方法の詳細な説明については、PHP 中国語 Web サイト (www.php.cn) の関連コンテンツに注目してください。