☰

Angular ディレクティブ - コンパイル、コントローラー、プレリンク、ポストリンクをいつどのように使用するか [closed] 質問する

tag-icon • tag-icon angularjs angularjs-directive
Angular ディレクティブ - コンパイル、コントローラー、プレリンク、ポストリンクをいつどのように使用するか [closed] 質問する

Angular ディレクティブを記述する場合、次のいずれかの関数を使用して、ディレクティブが宣言されている要素の DOM 動作、コンテンツ、および外観を操作できます。

  • コンパイル
  • コントローラ
  • プレリンク
  • 投稿リンク

どの関数を使用すべきかについて混乱があるようです。この質問は次の内容を含みます:

指令の基本

機能の性質、すべきこと、すべきでないこと

関連する質問:

ベストアンサー1

ディレクティブ関数はどのような順序で実行されますか?

単一の指令の場合

以下に基づいてドンドン次の HTML マークアップを検討してください。

<body>
    <div log='some-div'></div>
</body>

次のディレクティブ宣言では:

myApp.directive('log', function() {
  
    return {
        controller: function( $scope, $element, $attrs, $transclude ) {
            console.log( $attrs.log + ' (controller)' );
        },
        compile: function compile( tElement, tAttributes ) {
            console.log( tAttributes.log + ' (compile)'  );
            return {
                pre: function preLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (pre-link)'  );
                },
                post: function postLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (post-link)'  );
                }
            };
         }
     };  
     
});

コンソール出力は次のようになります。

some-div (compile)
some-div (controller)
some-div (pre-link)
some-div (post-link)

compile最初に が実行され、controller次にpre-link、最後に が実行されることが分かりますpost-link。

ネストされたディレクティブの場合

注:以下は、リンク関数で子をレンダリングするディレクティブには適用されません。多くの Angular ディレクティブはこれに該当します (ngIf、ngRepeat、または を含むディレクティブなど)。これらのディレクティブは、子ディレクティブが呼び出される前に、ネイティブに関数が呼び出さtranscludeれます。linkcompile

オリジナルのHTMLマークアップは、多くの場合、ネストされた要素で構成され、それぞれに独自のディレクティブがあります。次のマークアップのように（ドンドン):

<body>
    <div log='parent'>
        <div log='..first-child'></div>
        <div log='..second-child'></div>
    </div>
</body>

コンソール出力は次のようになります。

// The compile phase
parent (compile)
..first-child (compile)
..second-child (compile)

// The link phase   
parent (controller)
parent (pre-link)
..first-child (controller)
..first-child (pre-link)
..first-child (post-link)
..second-child (controller)
..second-child (pre-link)
..second-child (post-link)
parent (post-link)

ここでは、コンパイルフェーズとリンクフェーズの2 つのフェーズを区別できます。

コンパイルフェーズ

DOM がロードされると、Angular はコンパイル フェーズを開始し、マークアップをトップダウンでトラバースして、compileすべてのディレクティブを呼び出します。グラフィカルに表現すると、次のように表すことができます。

子供向けのコンパイルループを説明する画像

この段階では、コンパイル関数が取得するテンプレートはソース テンプレート (インスタンス テンプレートではない) であることを言及しておくことはおそらく重要です。

リンクフェーズ

DOM インスタンスは、多くの場合、ソース テンプレートが DOM にレンダリングされた結果に過ぎませんが、 によって作成されたりng-repeat、オンザフライで導入されたりすることもあります。

ディレクティブを持つ要素の新しいインスタンスが DOM にレンダリングされるたびに、リンク フェーズが開始されます。

このフェーズでは、Angular はcontroller、、を呼び出しpre-link、子要素を反復処理し、post-linkすべてのディレクティブを次のように呼び出します。

リンクフェーズの手順を示す図

おすすめ記事