Question

即使在阅读了这篇http://docs.angularjs.org/guide/compiler之后，我也不了解AngularJS使用的编译过程。我不理解他们两者之间的区别，也不了解它们的用途。

有人试图以某种方式解释它有点容易吗？

Answer 1

也许它有助于确定它们的相关性：

<强> compile()

允许您在元素插入之前访问该元素 DOM。（业绩优势）
返回link()函数。
如果您指定了自己的compile功能，则可以选择返回包含pre和post属性的对象，并定义您的预链接和后链接功能，如如下所述。

<强> link()

实际上有两个“关联”功能， pre 和 post 。
pre 在您的元素具有范围后调用，但在实际链接到文档并调用post之前，angular将递归compile任意儿童元素。调用元素的post链接函数后，所有子指令都已编译并链接。因此，如果在编译和插入子项之前需要对作用域进行任何更改，则使用pre。
post 是默认情况下从compile()返回的函数，在元素插入DOM并初始化了正确的范围对象后发生。此时，任何子指令都已编译并插入到元素中。

其他说明：

在指令选项中指定link()参数时：

返回{ 替换：...，范围： ...，链接：function（）{...}， };

该函数由compile()返回（除非您还指定了compile()函数，在这种情况下，link属性被忽略），因此如果您使用link }选项，你说，“我只需要在将元素添加到文档中并且范围可以使用之后再做一些事情。”
在指令中返回函数而不是选项对象时也是如此;该功能是您的link()功能。

当angular将您的指令连接到您的文档时（当它在HTML中看到您的指令属性或元素时），它将为正在创建的实例调用compile()函数。 compile()返回link()函数或具有pre和post链接函数的对象。所以说我的HTML有一部分是这样的：

<div my-directive class='first'>
  <div my-directive class='second'>
  </div>
</div>

假设您正在分配自己的编译函数：

angular.module('myapp').directive('myDirective', function(){
  return {
    replace: true,
    compile: function(){
      console.log("i'm compile");
      return {
        pre:  function(){ console.log("i'm pre-link"); },
        post: function(){ console.log("i'm post-link"); }
      };
    }
  }
});

当你运行应用程序时，你会看到（为了清晰起见，我添加了评论）：

"i'm compile"    // class = first
"i'm pre-link"   // class = first
"i'm compile"    // class = second
"i'm pre-link"   // class = second
"i'm post-link"  // class = second
"i'm post-link"  // class = first

Answer 2

compilation是遍历DOM并将指令应用于节点（插入模板等）的过程，而linking是将已编译的DOM与某个范围“连接”的过程，因此所有已编译的DOM中的绑定将在该范围内运行。

Answer 3

我也没有完全理解这个概念，但我会尝试回答这个问题。

编译功能是你必须操纵dom的机会。例如，ng-repeat指令有一个编译函数，它运行循环并创建所有例子。请注意，此时DOM元素尚未链接到任何范围。编译函数将返回一个函数，您可以使用该函数将范围链接到DOM元素。根据我的理解，如果你提供编译功能，那么你不需要有链接功能。原因是编译函数将返回一个链接函数。

另一方面，链接函数是范围将与给定DOM元素链接的位置。在这里，您有机会注册您想要的任何注册，注册事件监听器等。

这提高了应用指令的性能。

在AngularJS中编译和链接

3 个答案: