hereからコピーされました。私はここでもっと適切な答えを得ることができます!ディレクティブ間の通信に最適な方法
ディレクティブ間で通信する方法はかなりあるようです。内側のディレクティブが外側に何かを伝えなければならない(例えば、ユーザによって選択された)ディレクティブがネストされているとします。
<outer>
<inner></inner>
<inner></inner>
</outer>
これまでのところ、私はこの
を行うための5つの方法は、必要としている:親ディレクティブ
は、内側のディレクティブは、そのコントローラ上のいくつかの方法を公開することができ、外側ディレクティブは、必要とすることができます。だから、内側の定義
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) {
}
}
内側のディレクティブは、外側のディレクティブが応答できるイベントを、放出することができます$ to、$ onを介して。だから、内部ディレクティブのコントローラーで:
controller: function($scope) {
$scope.chosen = function() {
$scope.$emit('inner::chosen', something);
}
}
と外側ディレクティブコントローラで:
controller: function($scope) {
$scope.$on('inner::chosen, function(e, data) {
}
}
&
経由でアイテムが中での発現に特異的に結合することができ、親スコープで式を実行親スコープを作成し、適切なポイントで実行します。だから、内部コントローラは「innerChoose」関数を持っている、それは外側のディレクティブの上(この場合は)「functionOnOuter」関数を呼び出すことになる
scope: {
'innerChoose': '&'
},
controller: function() {
$scope.click = function() {
$scope.innerChoose({item:something});
}
}
を呼び出すことができます
<outer>
<inner inner-choose="functionOnOuter(item)"></inner>
<inner inner-choose="functionOnOuter(item)"></inner>
</outer>
:HTMLは次のようになります範囲:非分離スコープに
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システムで、同じオブジェクトへの直接アクセス権を持つか、サービスに通知するための関数を呼び出し、通知されるように自身を登録することさえできます。これは、ディレクティブをネストする必要はありません。
質問:それぞれの潜在的な欠点と利点は何ですか?