Angular.js中的compile pre-link post-link选项的个人理解

AngularJS的生命周期

在AngularJS的生命周期中，分为编译和链接两个阶段。

• 在编译阶段中，每一个指令可能有会有另外一个指令，AngularJS遍历他们形成了模板树，之后会返回一个模板函数，而在模板函数返回之前DOM都是没有形成的，所以此时ng-repeat指令就会生效。
  而在编译完成之后，会返回一个编译函数，这个编译函数会返回一个总的将所有子指令模板合并在一起的模板函数，并且交给链接阶段。

• 在链接阶段中，我们可以将作用域scope和DOM进行链接，并且对每一个函数的模板的实例进行链接或者监听器的注册。

这个阶段中的三个选项 compile pre-link post-link

这个三个指令并不是完全能用得到，特别是compile，这个指令在实践中，并不会频繁的使用。但是理解这个三个指令的工作机制对于我们理解AngluarJS的生命周期和运作过程有非常重要的作用。

首先看看compile

compile意思是我们希望指令和数据在放入DOM前进行对DOM的操作，因为我们从上一节生命周期中知道，在没有链接之前，我们的DOM虽然生成了，但是我们可以修改DOM，例如添加或者删除节点。但是我们并不推荐这样做。

compile指令可以返回一个对象或者函数，这里我们可以利用Angular的DOM操作element来实现

angular.module('myApp',[])
.directive('myDirective',function(){
    return{
        compile:function(tEle,tAttrs,transcludeFn){
            //这里进行DOM的操作
            return function(scope,ele,attrs){
            //在这里进行链接函数的链接
            }
        }
    }
});

• 注意我们只要使用了compile选项就会默认互斥link选项 这样link选项的所有都会被重写。

• 而且我在compile选项中的函数用了tEle 和tAtts 这是因为这里操作的还没有实例化的template，这里还没有进行链接，所以没有scope和实例。

再来看看Link

link指的是我们在compile执行完之后将作用域和DOM进行链接，一般我们指的link都是Postlink，因为如果你直接写Link指令就是默认变成postlink。

postlink的用法

postlink是我们最经常用的一个选项，当然我们默认只会写上link，就是指postlink，他可以为我们链接作用域和编写业务和逻辑代码。

prelink的用法

prelink应该是我们理解Angular中最难的一个选项，prelink会在Postlink之前执行，他在compile之后执行。在prelink中写的是我们在compile DOM操作之后但是又是在postlink执行的业务代码。

实例代码：

angular.module('myApp',[])
.directive('myDirective',function(){
    return{
        compile:function(tEle,tAttrs,transcludeFn){
            //这里进行DOM的操作
            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());
              }
            }
        }
    }
});

compile pre-link post-link 执行的顺序

首先应该是compile和pre-link是以此的执行的，他们执行完之后post-link才会执行。如果有多个嵌套的指令元素，那么compile 和pre-link会依次执行，而它们执行完后postlink才会执行。
且，pre-link会反向执行，从内到外的执行来保证执行顺序。

这里引用jingxian的文章

传入compile pre-link post-link 的参数解析

当compile 运行的时候，我们的DOM还会修改所以这里的参数都是模板 例如tEle tAttrs
当进入链接时pre-link传入的参数这时是还是tEle tAttrs 因为这里还是链接之前
当然pros-link传入的作用域和元素都是实例我们用，iElement iAttrs scope 如果存在require引入新的作用域的话，我们会多一个controller的参数指向引入的控制器。