angular中的compile和link函数
前言
这篇文章，我们将通过一个实例来了解 Angular 的 directives （指令）是如何处理的。Angular 是如何在 HTML 中找到这些 directive 的。以及如何编写自定义的指令。
这是原文提供的代码：http://www.angularjshub.com/examples/customdirectives/compilelinkfunctions/#top
更加友好的排版：http://blog.wangtuyao.com/post/2014/7/2/compile-and-link-function-in-angular
Initialization, compilation 和 linking 阶段
当 Angular 从 HTML 中解析 directive 的时候，我们每个 directive 的解析可以大致分为 3 步。
- initialization ：这个阶段是 Angular 在 DOM 遍历的时候第一次发现 directive 的时候执行。（它只会发生一次，即便是在 DOM 中出现了多次）
initialization允许 directive 做一些初始化的工作。 -
compilation ：这个阶段 Angular 遍历 DOM ，并且收集所有的 directive 。所有 directive 都可以在这个阶段操作 DOM（在这个阶段，同一个 directive 在不同的 DOM 节点如果中出现了多次，compilation 将会执行多次）这个阶段 scope 是还没有被附加上去，所以是无法访问到 scope 的。
-
linking ：这个阶段的 DOM 节点，Angular 会把所有 directive 的事件监听器（event listeners）注册到 DOM 中，建立对 scope 的监听。并且把一个 scope 附加到 directive 中。这整个阶段是在 compilation 之后进行的。如果想要访问 scope 就可以在这个阶段进行。
创建自定义 directive
我们可以通过 Angular 中提供的 directive 创建自定义的指令。
directive(name, directiveFactory);
方法提供了两个参数，第一个为 directive 的名字，第二个是一个工厂方法。
在 HTML 中指定来引用一个指令有多种方法，查看更多内容。directive 的命名说有几种约定的规则：
- 使用驼峰式命名，首字母小写。
- HTML 中使用小写字符加横线的方式。
例如：directive 的名称为 myCustomDir 所有 HTML 中引用为 my-custom-dir;
Compile 和 link function
上文讲了 initialization, compilation 和 linking 阶段，现在来看一下 directive 是如何执行的。这是一个最为复杂的例子，这个例子包含了 directive 处理的所有阶段。
myModule.directive("myCustomDir", function ()
{
// Initialization
// ...
// Definition object
return {
// Compile function
compile: function (element, attrs)
{
// ...
return {
// Pre-link function
pre: function (scope, element, attrs)
{
// ...
},
// Post-link function
post: function (scope, element, attrs)
{
// ...
}
};
}
};
});第一个参数表示 directive 的名字，第二个参数表示 directive 的工厂方法，返回一个对象。这个对象可以包含多个属性，查看更多。这里我们只关注compile 属性。compile 对应了一个 compile function ，这个方法返回一个包含 pre 和 post 属性的对象。为了能更好的理解情况下图：
假如我们定义了如下的自定义的 directive dir1，dir2，dir3 和 dir4 ，Angular 又是如何处理的呢
<... dir1 ...>
<... dir2 dir3 ...>
<... dir4 dir1 ...>
</...>
</...>
</...>initialization 和 compilation 阶段将会在第一次遍历 DOM 的时候发生。这里是处理过程：
- DOM 第一次遍历的时候，
dir1将会首先被发现。所以dir1的initialization将会首先执行，紧接着的是dir1的compilation。 - 在第一个 DOM node 处理完后，接着会处理这个 node 的子 node，这里就是
dir2,dir3；dir2和dir3是 DOM 第一次遍历到，所以initialization部分和compilation部分会依次调用； - 接下来处理
dir2和dir3的子 node，这里包含了dir4和dir1。因为dir1在第一步的时候已经initialization过，所以不会再次执行，但是dir4还是会调用initialization因为它是 DOM 第一次遍历到。所有的 directive 都会在initialization后调用compilation。
如果 html 中还有其他的 DOM 树，处理过程也是类似的，以同样的方式从上到下遍历 DOM 树，如果有 DOM 节点存在着子节点，每个字节点都将会被依次遍历后再进入下一个节点。这个过程结束之后，initialization 和 compilation 的处理也结束了。directive 将会被替换，最终版本的 DOM 树将会呈现出来。
接下来的处理过程是 linking。这个过程有可以细分为 pre-linking 和 post-linking。由于 Angular 使用 depth-first 方式遍历 DOM 树。所以 angular 首先访问到的是 pre-linking ，当所有 pre-linking 执行完毕后，DOM 遍历进入到一个“回溯”（backtracking ）阶段的时候所有的 post-linking 才执行。在 pre-linking 函数做DOM 的转换时不安全的（pre-linking 的执行是在节点的子节点还未执行link，意思是：在某一个节点执行 pre-linking 的时候，这个节点的子节点还未进行 link），在post-linking 阶段才是安全的。
自定义指令申明 compile 和 link 函数的几种方式
上文，我们已经知道了一种方式在一个模块中创建一个指令，并且这是一种最复杂的方式，因为我们既需要访问 compile ，pre-link，和 post-link，但是通常情况下我们不需要全部，我们可以根据需求选择不同的函数。我们开看一下几种方式（代码请看上面的链接）：
-
不定义对象
我们可以简单的 Post-link 后，不定义对象返回。这是在例 1. 所示。
myModule.directive("myCustomDir", function () { // Initialization // ... // Post-link function return function (scope, element, attrs) { // ... }; }); -
定义一个对象和只定义一个 post-link 函数
定义对象后返回 post-link 函数，如例 2.所示：
myModule.directive("myCustomDir", function () { // Initialization // ... // Definition object return { // Post-link function link: function (scope, element, attrs) { // ... } }; }); -
定义一个对象和定义 post-klink 和 pre-link
返回一个对象，这个对象有一个 link属性，这个 link 属性又包含一个
pre和post属性的对象，分别对应 pre-link 函数和 post-link 函数。如实例 3.所示：myModule.directive("myCustomDir", function () { // Initialization // ... // Definition object return { link: { // Pre-link function pre: function (scope, element, attrs) { // ... }, // Post-link function post: function (scope, element, attrs) { // ... } } }; }); -
定义一个对象和只定义 compile 函数
返回一个对象，包含 compile 属性，对应 compile 函数，如例 4. 所示：
myModule.directive("myCustomDir", function () { // Initialization // ... // Definition object return { // Compile function compile: function (element, attrs) { // ... } }; }); -
定义一个对象和定义 compile 和 post-link 函数
定义一个对象和定义 compile 和 post-link 函数，如例 5.所示：
myModule.directive("myCustomDir", function () { // Initialization // ... // Definition object return { // Compile function compile: function (element, attrs) { // ... // Post-link function return function (scope, element, attrs) { // ... }; } }; }); -
定义一个对象和 compile，pre-link 和 post-link 函数
最后一种方式，如例 6.所示
myModule.directive("myCustomDir", function () { // Initialization // ... // Definition object return { // Compile function compile: function (element, attrs) { // ... return { // Pre-link function pre: function (scope, element, attrs) { // ... }, // Post-link function post: function (scope, element, attrs) { // ... } }; } }; });
compile 和 link 的参数
我们已经了解了在自定义指令中定义 compile 和 link 函数。现在来看一下 compile 和 link 的参数。
Angular 使用了一种内置的、轻量级的 jQuery，称为 jqLite 来操作和查询 DOM。但如果页面中同时有 jQuery 存在，那么 Angular 会用 jQuery 替换掉内置的 jqLite。
compile 函数的签名如下：
function (element, attrs)
- element : 表示被编译后的、包含了 DOM 节点的 jqLite\jQuery 对象（如：如果 directive 是一个 div 元素，那么 element 是一个 jqLite\jQuery 包装的对象）。
- attrs: attrs 是一个对象。这个对象的每一个属性代表着 Node 中的每一个同名属性。（如：Node 中有一个 my-attribute 属性，那么就可以通过 attrs.myAttribute 来获取该属性的值）
link 函数的签名如下：
function (scope, element, attrs)
- scope: directive 的 scope；
- element: 和 compile 函数的 element 参数相同；
- attrs: 和 compile 函数中的 attrs 参数相同
