AngularJSコントローラー間の通信方法の詳細説明-PHP开发-php.cn

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

高洛峰

リリース： 2016-12-07 17:09:14

オリジナル

1398 人が閲覧しました

この記事の例では、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(&#39;summon&#39;, function(e, newLocation) {
    $scope.location = newLocation;
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.summon = function() {
    $scope.$emit(&#39;summon&#39;, $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 サイト (m.sbmmt.com) の関連コンテンツに注目してください。