1

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システムで、同じオブジェクトへの直接アクセス権を持つか、サービスに通知するための関数を呼び出し、通知されるように自身を登録することさえできます。これは、ディレクティブをネストする必要はありません。

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

答えて

2

まず、私はあなたの例では、

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

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

で仕事に行くされていないあなたのどちらかが$解析と全体innerChoose式を実行する必要がある、またはあなたが必要なことを指摘したいです

 
<outer> 
    <inner inner-choose="functionOnOuter"></inner> 
    <inner inner-choose="functionOnOuter"></inner> 
</outer> 

それ以降は、次のような関数への参照を渡すだけです。あなたのチームの趣味の好みや具体的に達成する必要があるものに基づいて、最も理にかなっています。たとえば、JSONのデータに基づいて設定されたコマンドを実行する必要がある場合、それらは異なる方法で組み合わされた複数のレイヤーに基づいて事前にはわかっていませんが、イベントまったく正しいデータで正しいコマンドを作成または実行できない可能性があります。

あなたが行う必要がある主なタスクは、機能を活用するビューを構築する場合は、Viewsをできるだけシンプルに保つために共有$スコープを使用することです。

主に、ngModelにはrequireを使用します。これはparentディレクティブよりも兄弟ディレクティブの方が重要です。私はまだ、親コントローラ全体への参照を必要とするユースケースを持っていません。

1

このような階層がある場合は、最初のオプションを使用します。 requireは、2つのディレクティブまたはコンポーネント(角度1.5から)を密接に結合するために作成されました。これを使用してinnerouterなしで使用できないことを指摘できます。

私は間違った使い方があると多くのスコープを通過する可能性があるため、イベントのファンではありません。

&とスコープ設定にはいくつかの利点がありますが、目的に応じて異なります。これらはすべての場合に該当しません。

私は今、このような議論では、角度2を考慮に入れるべきだと思います。子コンポーネントから関数を実行する場合は、このコンポーネントに@ViewChildアノテーションを渡す必要があります。私はAngular 1.xの最も近い解決策はrequire(これは私が言及したように)をAngular 1.xコンポーネントのために実装することです。

関連する問題