angular指令之complie和link不得不说的故事_angular指令link中数据过多卡死-CSDN博客

angular指令比较晦涩难懂的就是complie和link字段了，什么时候该用complie？什么时候该用link？总是很难分别清楚。当理解了指令的真正编译原理的时候，就会发现这相当的简单。

ng怎样处理指令其实是依赖于它定义时的对象属性的,你可以定义一个compile或者一个link函数,或者用pre-link和post-link函数来代替link.。

我们先看一段简单的代码：

html代码

<level-one>
    <level-two>
        <level-three>
            Hello
        </level-three>
    </level-two>
</level-one>

js代码

var app = angular.module('plunker', []);

function createDirective(name){
  return function(){
    return {
      restrict: 'E',
      compile: function(tElem, tAttrs){
        console.log(name + ': compile => ' + tElem.html());
        return {
          pre: function(scope, iElem, iAttrs){
            console.log(name + ': pre link => ' + iElem.html());
          },
          post: function(scope, iElem, iAttrs){
            console.log(name + ': post link => ' + iElem.html());
          }
        }
      }
    }
  }
}

app.directive('levelOne', createDirective('levelOne'));
app.directive('levelTwo', createDirective('levelTwo'));
app.directive('levelThree', createDirective('levelThree'));

结果：

关于complie和preLink和postLink的调用顺序可以参考我的上一篇博文。

在这里再简要说明一下，从上面的结果可以看出，所有的指令都是先compile，然后preLink，然后postLink。节点指令的preLink是在所有子节点指令preLink，postLink之前，所以一般这里就可以通过scope给子节点传递一定的信息。节点指令的postLink是在所有子节点指令preLink，postLink完毕之后，也就意味着，当父节点指令执行postLink时，子节点postLink已经都完成了，此时子dom树已经稳定，所以我们大部分dom操作，访问子节点都在这个阶段。

这里我们主要来看一下complie、preLink和postLink函数中element属性有什么不同?scope作用域又是什么时候绑定的?

如果你仔细观察的话，就会发现上述结果中，传递给complie的element参数是最原始的html标志，变量指向的是template element。一旦运行levelone指令中的compile函数,ng就会递归深度遍历它的dom节点,然后在level-two与level-three上面重复这些操作.。因为complie的element是原始的html，所以可以在ng创建element实例以及创建scope对象之前改变dom的结构，以便在只有一个template element的情况下，生成多个element实例，例如ngRepeat。

因为在complie阶段，element还是原生的html，所以此时的scope是还没有创建的，complie函数不能够访问scope。在complie完成之后，将创建template element的element实例以及实例的scope。当linking发生时，这个实例element以及scope对象已经是可用的了，并被传递给preLink函数。所以preLink中的element不是一个原始的html，而是一个element实例，它拥有一个scope。同样的情况也在postLink之中。

一个元素的pre-link函数能够保证是运行在它所有的子指令的post-link与pre-link运行之前执行的。正如之前所说的一般这里就可以通过scope给子节点传递一定的信息。当运行包含子指令的指令post-link时,反向的post-link规则可以保证它的子指令的post-link是已经运行过的，这就是为什么人们都认为post-link是最安全或者默认的写业务逻辑的地方.。

参考链接：http://www.jb51.net/article/58229.htm