本文章主要就angularjs指令中的compile，link及controller函式的使用和區別進行詳細討論。以下是本文的結構：

1. directive的執行原理
2. compile用法
3. link 用法
4. controller 用法
5. compile，link及controller區別
6. link和controller之間傳參

directive的執行原理

在詳細討論以上五點之前，先要討論下directive的執行原理。在AngularJS應用啟動前，指令都以html文字的形式儲存在文字編輯器中。當該應用啟動後，會進過兩個階段，即編譯階段和連結階段。之後，作用域（scope）會同html進行繫結，應用會對html中dom的操作進行實時響應。整個過程主要有兩個階段：

編譯階段： AngularJS會遍歷整個html文件並根據JS中的指令定義來處理頁面上宣告的指令。換句話說， 在遍歷dom時，所有的指令將被收集，但對dom樹還沒有進行資料繫結，此時對dom操作對效能影響很小。在編譯階段，同種 directive 在不同的 dom 節點出現一次，編譯也會隨之執行一次。然而，在這個階段 scope 是無法訪問到的。一個指令一旦編譯完成，馬上就可以通過編譯函式對其進行訪問，編譯函式的簽名包含有訪問指令宣告坐在的元素element以及鈣元素其他屬性attrs的方法。這個編譯函式會返回一個模板函式，包含有完整的解析樹。最後，模板函式被傳遞給編譯後的dom樹中，每個指令定義的連結函式。

連結階段： Angular 會把所有 directive 的事件監聽器註冊到dom中並建立對 scope（作用域）的監聽，並且把一個 scope 加到 directive 中。由於連結階段是在編譯階段之後進行的，所以這時的scope是可以訪問的。

compile用法

compile函式負責對模板dom進行轉換，它返回一個物件或者函式。compile本身相較於link函式不會那麼頻繁地使用。通常情況下，如果設定了compile函式，那就意味著可以在指令和實時資料被放到dom中之前對dom進行操作，在這個函式中進行例如新增或刪除節點等dom操作都是安全的。
注意：compile和link是相斥的。如果同時設定了兩項，compile返回的函式會被當作連結函式把後面定義的link函式所取代，也就是說，後面的link函式將起不到作用。

// ...
compile: function(element, attrs){
            var curEle = angular.element('id');
            return function(scope, element, attrs) {
                 //連結函式
            };
        }
// ...

link函式用法

link函式負責將作用域和dom進行連結，並對元素的註冊事件進行監聽。而在這個操作執行之前，可以手動操作dom。如果有了編譯函式，它會返回一個連結函式，不需要另外定義。如果自定義指令很簡單，可以從工廠函式返回一個函式來代替物件(見程式碼1)，這樣也算是一個連結函式。一般來說，都可按照程式碼2來定義link函式（該函式的引數列表是固定的）。

程式碼1：

app.directive('myDirective', function() {
     return {
         pre: function(tElement, tAttrs, transclude) {
                //在子元素被連結之前執行
                //在這裡進行dom轉換不安全
                //之後呼叫link函式將無法定位要連結的元素
         }
     }, {
         post: function(tElement, tAttrs, transclude) {
                //在子元素被連結之後執行
                //這裡就相當於link函式，可以省略到編譯函式

         }
     }
});

程式碼2：

app.directive('myDirective', function() {
     return {
        link: function(scope, element, attrs, controller) {
         //controller是require中指定的控制器，名字不能寫錯，不然對應不起來...
        }
     }
});

controller用法

controller這裡的屬性值可以是一個字串（控制器名稱）或者函式（控制器內容）。如果屬性值為字串時，會以字串為控制器的名字，查詢在應用中已經註冊過的控制器的建構函式。

app.directive('myDirective', function() {
     return {
        controller: function($scope, $element, $attrs, $transclude) {
             //controller邏輯內容
        }
        or
        controller: 'MyController'
     }
});

一般在控制器內部操作dom與AngularJS的風格不符，所以需要通過連結函式來實現這個功能。
自定義指令的控制器和link函式是可以進行互換的。控制器主要用來提供可在指令間複用的行為，但是連結函式只能在當前內部指令中定義行為，且無法在指令間複用。

compile，link及controller區別

執行順序：

app.directive('myDirective', function() {
    return {
        restrict: 'AE',
        compile: function(tElem, tAttrs) {
            console.log(' compile start ');
            return {
                pre: function(scope, iElem, iAttrs) {
                    console.log('pre link start ');
                },
                //這裡的post函式想當於link函式
                post: function(scope, iElem, iAttrs) {
                    console.log('post link start ');
                }
            } 

        },
        controller: function($scope, $element, $attrs) {
            console.log(' controller start ');
        }
    };
});

結果：

可見compile函式最先執行，其次是controller，然後是pre和post（link）函式。

作用：

• compile：負責對模板dom進行轉換；
• link： 負責將作用域和dom進行連結，並對元素的註冊事件進行監聽，只能在當前內部指令中定義行為，且無法在指令間複用；
• controller：用來提供可在指令間複用的行為。

compile與link區別在於它們要做的事情不同，而link與controller在於這兩個函式上的定位。

link和controller之間傳參