Question

我对这些功能有些怀疑。

假设我有这个指令：

.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()和PostLink()吗？

Answer 1

link和compile无法合作，不。

在指令定义对象中，如果您仅定义link，那就像是一个空的compile函数的简写，其中包含空preLink函数postLink函数中的代码。一旦定义compile，link将被angular忽略，因为compile应该返回链接函数。

如果您只从compile返回一个功能，则会执行发布链接。

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

（有点）记录here - 查看代码示例中的注释。

Answer 2

几天前，Jurgen Van de Moere发表了一篇很好的文章，题目是“AngularJS指令中编译和链接函数的细节”。它非常清楚地解释了compile，pre-link和post-link函数的职责和顺序。

http://www.jvandemo.com/content/images/2014/Aug/cycle-2.png

你一定要看看它：http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives

AngularJS指令：链接和编译功能是否可以协同工作？

2 个答案: