35

私はこの機能についていくつかの疑問を持っています。

このディレクティブがあるとしましょう：

.directive('hello', function () {
    return {
      template: '<div>Hello <span ng-transclude></span></div>',
      restrict: 'E',
      transclude: true,
      compile: function() {
        console.log('Compile()');

        return {
          pre: function() {
            console.log('PreLink()');
          },
          post: function() {
            console.log('PostLink()');
          }
        };
      },
      link: function postLink(scope, element, attrs) {
        console.log('Link()');
      }
    };
  }

そして、それを次のようにテンプレートに追加します。

<hello>World</hello>

コンソール ログ:

Compile()
PreLink()
PostLink()

では、なぜ がlink()呼び出されないのでしょうか。

からオブジェクトを返す代わりに、コンソール ログを出力compile()する単一の関数を返す場合:PreLink()

Compile()
PreLink()

Compile()コンソール ログから何も返されない場合:

Compile()

まだlink()呼ばれていません。

コメントするだけでCompile()、Link()最終的に印刷されます：

Link()

誰かがこれをすべて説明できますか？一緒に仕事をするつもりですLink()か？Compile()Compile のPreLink()and を使用する必要がありPostLink()ますか?

4

2 に答える 2

83

linkいいえ、一緒に仕事をcompileしないでください。

ディレクティブ定義オブジェクトでは、のみを定義する場合、それは関数内にコードを含む空の関数を持つ空の関数をlink持つことの省略形のようなものです。を定義するとすぐに、コンパイルはリンク関数を返す必要があるため、angular によって無視されます。compilepreLinkpostLinkcompilelink

から関数を 1 つだけ返す場合は、リンク後compileに実行されます。

または、別の言い方をすれば、スコープが によってリンクされた後に呼び出される関数linkへの単なるショートカットです。postLinkcompile

それは（一種の）ここに文書化されています- コードサンプルのコメントを見てください。

于 2013-11-05T19:43:42.153 に答える
11

数日前、Jurgen Van de Moere によって「AngularJS ディレクティブ内のコンパイルおよびリンク関数の核心」に関する素晴らしい記事が公開されました。compile、pre-linkおよびpost-link関数の責任と順序について非常に明確に説明しています。


(出典: jvandemo.com )

ぜひチェックしてください：http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives

于 2014-09-06T12:16:45.037 に答える