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