刚开始学习 AngularJS Directive 时,总是不太能搞明白 compile 和 link 两个属性的含义和区别。最近写的多一些,读的资料也多了一些,渐渐有了一些理解,简单记录下来:

compile 属性是一个函数。该函数会针对每一个 directive 的实例执行一次,在 compile 阶段:

link 属性可以有两种配置方式。 link 属性可以被设置为一个对象,包含 pre, post 两个属性,分别对应一个函数(preLink, postLink)。preList,postLink 的区别在于执行顺序。preLink 是自顶向下的,先父节点,后子节点,postLink 正好相反。

.directive{
  return {
    link: {
      pre: function preLink(){
             ...
           },
      post: function postLink() {
             ...
           }
    }
  }
}

link 属性也可以被直接设置为一个函数,则默认相当于设置了 postLink 函数。

.directive{
  return {
    link: function link(){
            ...
          }
  }
}

等于

.directive{
  return {
    link: {
      post: function post() {
             ...
           }
    }
  }
}

由此可见,如果直接将 link 属性设置为一个函数,则 link 阶段的执行顺序是自底向上的。

link 阶段会针对每一个被 RENDERED 的 directive 实例执行一次。此阶段:

如果定义了 compile 属性则 link 属性会被忽略。
如果你想同时使用 compile 方法和 link 方法,那么 compile 方法的返回值需要是一个函数,这个函数会被用作 link 方法。

对于嵌套 directive 的初始化流程中 controller,compile,link 的执行顺序。可以参考下面这个 jsFiddle:

最后是自己的一些感受:

另外附上几个链接,供有兴趣的朋友阅读: