1

ここからコピペ。たぶん、ここでもっと適切な答えを得ることができます!

ディレクティブ間の通信にはかなりの数の方法があるようです。ネストされたディレクティブがあり、内部ディレクティブが何かを外部ディレクティブに伝達する必要があるとします (たとえば、ユーザーが選択したなど)。

<outer>
  <inner></inner>
  <inner></inner>
</outer>

これまでのところ、これを行う5つの方法があります

require: 親ディレクティブ

内部ディレクティブは外部ディレクティブを要求することができ、そのコントローラーでいくつかのメソッドを公開できます。したがって、内部定義では

require: '^outer',
link: function(scope, iElement, iAttrs, outerController) {
   // This can be passed to ng-click in the template
   $scope.chosen = function() {
     outerController.chosen(something);
   }
}

そして、外側のディレクティブのコントローラーで:

controller: function($scope) {
   this.chosen = function(something) {
   }
}

$emit イベント

内側のディレクティブは $on を介して、外側のディレクティブが応答できるイベントを $emit できます。したがって、内部ディレクティブのコントローラーでは次のようになります。

controller: function($scope) {
  $scope.chosen = function() {
    $scope.$emit('inner::chosen', something);
  }
}

および外部ディレクティブコントローラーで：

controller: function($scope) {
  $scope.$on('inner::chosen, function(e, data) {
  }
}

& を介して、親スコープで式を実行する

アイテムは、親スコープの式にバインドし、適切な時点で実行できます。HTML は次のようになります。

<outer>
  <inner inner-choose="functionOnOuter(item)"></inner>
  <inner inner-choose="functionOnOuter(item)"></inner>
</outer>

したがって、内部コントローラーには、呼び出すことができる「innerChoose」関数があります

scope: {
  'innerChoose': '&'
},
controller: function() {
  $scope.click = function() {
    $scope.innerChoose({item:something});
  }
}

（この場合）外側のディレクティブのスコープで「functionOnOuter」関数を呼び出します。

controller: function($scope) {
  $scope.functionOnOuter = function(item) {
  }
}

非分離スコープでのスコープ継承

これらがネストされたコントローラーであることを考えると、スコープの継承が機能する可能性があり、内部ディレクティブは、分離されたスコープがない限り、スコープ チェーン内の任意の関数を呼び出すことができます)。したがって、内部ディレクティブでは次のようになります。

// scope: anything but a hash {}
controller: function() {
  $scope.click = function() {
    $scope.functionOnOuter(something);
  }
}

そして外側のディレクティブで:

controller: function($scope) {
  $scope.functionOnOuter = function(item) {
  }
}

インナーとアウターの両方に注入するサービスで

サービスは両方のディレクティブに挿入できるため、同じオブジェクトに直接アクセスしたり、関数を呼び出してサービスに通知したり、pub/sub システムで通知を受けるように自身を登録したりすることもできます。これには、ディレクティブをネストする必要はありません。

質問: それぞれの潜在的な欠点と利点は何ですか?

4

2 に答える 2