9

私には奇妙な状況があります。2 つのディレクティブを含む外部ディレクティブがある場合

inner-directive1 -テンプレートが定義されています。

inner-directive2 - templateUrlが定義されています。

inner-directive1 postLink 関数は、outer-directive postLink 関数の前に呼び出されています - 予想通りです。

しかし、inner-directive2 poslink 関数は、outer-directive postLink の後に呼び出されています - 期待どおりではありません。

postLink 関数の呼び出しは、inner-directive1、outer-directive、inner-directive2で、期待していたのはinner-directive1、inner-directive2、outer-directiveです。

外部ディレクティブのテンプレートは次のとおりです。

<div ng-transclude><div inner1></div><div inner2></div></div>

JsFiddle を見てください

その理由を知っている人はいますか？そして、期待通りに動作させる方法はありますか?

JSFiddle - コンソール ログを見てください。ありがとう、ベン

4

2 に答える 2

10

Angular ディレクティブ ドキュメント ( http://docs.angularjs.org/guide/directive ) からの理由は次のとおりです。

templateUrl - テンプレートと同じですが、テンプレートは指定された URL から読み込まれます。テンプレートの読み込みは非同期であるため、テンプレートが読み込まれるまでコンパイル/リンクは中断されます。

そのため、テンプレートが読み込まれるまで、特定のディレクティブはリンクを停止します。その間、他のディレクティブが飛び込んで実行されます。

関数をリンクするタイミングが重要な場合は、templateUrl としてではなく、テンプレートを直接含める必要があります。誰かがこれを回避するクールな方法を考え出さない限り。

于 2013-10-19T22:02:31.773 に答える
1

正確なユースケースはわかりませんが、 element[0].querySelector('#dynamicId'); を使用しようとしたときにこの問題に遭遇しました。

リンク関数は外部リンクの後に入力 1 から実行されていたため、この場合は「null」になります。

修正はかなり単純で、外側のディレクティブのリンク関数で、element.ready() を使用してコードをラップします。

element.ready(function(){
     var item = element[0].querySelector('#dynamicId');
     item.bind('blur', function(){
         alert('blur')
     });
})

これにより、動的要素を見つけて、テンプレートの URL から非同期にロードされている場合でもイベントを添付できます。

于 2014-11-11T00:22:26.710 に答える