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()工作？我应该只使用编译的PreLink()和PostLink()吗？

4

2 回答 2

83

link并且compile不要一起工作，不。

在指令定义对象中，如果您只定义link，这就像在函数中有一个空compile函数和一个空preLink函数的简写postLink。一旦定义compile,link就会被 Angular 忽略，因为 compile 应该返回链接函数。

如果您只从 中返回一个函数compile，那么它将在链接后执行。

或者，换句话说，link只是postLink在作用域被链接后调用的函数的快捷方式compile。

它（有点）记录在这里- 查看代码示例中的注释。

于 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 回答