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的参数指向引入的控制器。