10

私はJavascriptプログラミングにかなり慣れていないので、AngularJSにしか触れていません。それを評価するために、簡単なメモ アプリケーションを作成することにしました。モデルは非常にシンプルで、各メモにラベル、テキスト、およびタグのリストがあるメモのリストです。ただし、ネストされたディレクティブの分離されたスコープ間でデータを渡す際に問題が発生しました。

3 つのディレクティブ、no​​tes、note、tagger (同じ名前の新しい要素を定義する) があります。それらのそれぞれは、分離されたスコープを使用しています。

notes ディレクティブは ng-repeat を使用して、そのノートのそれぞれを note 要素で「レンダリング」します。

note ディレクティブは tagger 要素を使用して、タグのリストを「レンダリング」します。

note ディレクティブは、スコープを定義します: { getNote: "&", ... } ノートのリストからノート インスタンスをノート コントローラー/ディレクティブに渡すために。getNote(index) 関数は、note ディレクティブのリンク関数で呼び出されます。これはうまくいきます！

tagger ディレクティブはスコープを定義します: { getTags: "&", ... } 特定のノートのタグのリストを tagger コントローラー/ディレクティブに渡すために。getTags 関数は tagger ディレクティブのリンク関数で呼び出されます。これは動作しません！

私が理解しているように、問題は、ディレクティブのリンク関数が一貫性のない順序で呼び出されることです。アプリケーションをデバッグすると、リンク関数が次の順序で呼び出されることがわかります。

  1. notes ディレクティブの link 関数 (notes スコープに getNote 関数を追加)

  2. 最初のノートの tagger ディレクティブの link 関数 (親ノート スコープで getTags を呼び出す) 関数

  3. 最初のノート ディレクティブのリンク関数 (getTags をスコープに追加) (親のノート スコープで getNote を呼び出す)

  4. 2 番目のノートの tagger ディレクティブのリンク関数 (親ノート スコープで getTags を呼び出す) 関数

  5. 2 番目のノート ディレクティブのリンク関数 (getTags をスコープに追加) (親のノート スコープで getNote を呼び出す)

#2 では、最初のノートのスコープにはまだ getTags 関数がないため、これは機能しません。

単純な例はPlunkerにあります。

したがって、私の質問は次のようになります。ネストされたディレクティブでリンク関数が呼び出される順序を決定するものは何ですか。

（タガーディレクティブのgetTagsで$watchを使用して問題を解決しました...）

よろしく

4

2 に答える 2

18

私が持っていた同様の質問に親切に答えてくれた Josh D. Miller を引用します。

" テクニカル ノートをいくつか。次のマークアップがあるとします。

<div directive1>
  <div directive2>
    <!-- ... -->
  </div>
</div>

これで、AngularJS は特定の順序でディレクティブ関数を実行してディレクティブを作成します。

ディレクティブ 1: コンパイル

ディレクティブ 2: コンパイル

ディレクティブ 1: コントローラー

ディレクティブ 1: プレリンク

ディレクティブ 2: コントローラー

ディレクティブ 2: プレリンク

ディレクティブ 2: ポストリンク

ディレクティブ 1: ポストリンク

デフォルトでは、ストレートな「リンク」関数はポストリンクであるため、外側のディレクティブ 1 のリンク関数は、内側のディレクティブ 2 のリンク関数が実行されるまで実行されません。そのため、リンク後の DOM 操作のみが安全であると言えます。"

于 2013-08-28T14:59:27.053 に答える
0

単一の要素では、リンク関数の順序はコンパイル関数の順序によって決定され、コンパイル関数priorityはディレクティブ定義オブジェクトのプロパティに従って順序付けられます。

ソース: http://docs.angularjs.org/guide/directive

transclusion を持つ複数の要素: 内部ディレクティブは外部ディレクティブの前に評価されます。理由: トランスクルージョンの性質。

兄弟を持つ複数の要素: 上から順に実行されます。理由: $compile の解析ロジック。

于 2013-08-18T06:00:20.130 に答える