摘要：引言指令可以說是的核心，而其開發也是比較困難的，本文主要介紹指令的一些參數和的綁定策略。指令執行的優先級，用于多個指令同時作用于同一個元素時。改變父會影響指令，而改變指令不會影響父。在父和指令之間建立雙向綁定。

指令(Directive)可以說是 AngularJS 的核心，而其開發也是比較困難的，本文主要介紹指令的一些參數和scope的綁定策略。

從 AngularJS 的官方文檔中看到指令的參數如下：

{
    priority: 0,
    template: "
", // or // function(tElement, tAttrs) { ... },
    // or
    // templateUrl: "directive.html", // or // function(tElement, tAttrs) { ... },
    transclude: false,
    restrict: "A",
    scope: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    controllerAs: "stringAlias",
    require: "siblingDirectiveName", // or // ["^parentDirectiveName", "?optionalDirectiveName", "?^optionalParent"],
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
      // or
      // return function postLink( ... ) { ... }
    },
    // or
    // link: {
    //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
    //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
    // }
    // or
    // link: function postLink( ... ) { ... }
}

下面詳細講解每個參數。

指令執行的優先級，用于多個指令同時作用于同一個元素時。例如：

上面的例子中，ng-repeat 指令和 ng-bind 指令同時作用于 option 元素，由于 ng-repeat 的 priority 為1000，ng-bind 的 priority 為0，因此先執行 ng-repeat，然后變量 i 的值才能用于 ng-bind 中。

HTML模板內容，用于下列情況之一：

替換元素的內容（默認情況）。

替換元素本身（如果 replace 選項為 true）。

將元素的內容包裹起來（如果 transclude 選項為 true，后面會細說）。

值可以是：

一個 HTML 字符串。例如：

一個函數，接收兩個參數 tElement(元素本身) 和 tAttrs(元素的屬性集合)，返回 HTML 字符串。

templateUrl 和 template 作用相同，但模板內容是從 $templateCache 服務或遠程 url 加載。

值可以是：

一個字符串，AngularJS 會先從 $templateCache 中查找是否緩存了對應值，如果沒有則嘗試 ajax 加載。例如：在頁面中有如下 script：

AngularJS 會將 type="text/ng-template" 的 script 標簽中的內容以 id 值為 key 緩存到 $templateCache 服務中，此時可以設置 templateUrl: "Hello.html"。

一個函數，接收兩個參數 tElement(元素本身) 和 tAttrs(元素的屬性集合)，返回 url 地址。

官方文檔的解釋為：編譯元素的內容，使其在指令內部可用。該選項一般和 ng-transclude 指令一起使用。

如果 transclude 設置為 true，則元素的內容會被放到模板中設置了 ng-transclude 指令的元素中。例如：

app.directive("testTransclude", [
    function () {
        return {
            restrict: "E",
            transclude: true,
            template:
                "

                    
指令內部段落
                    

                
"
        };
    }
]);

    
該段落會被放到指令內部

上面生成后的 DOM 結構為：

指令的使用形式。

值可以為：

"E" - 指令作為元素使用

"A" - 指令作為屬性使用

"C" - 指令作為類名使用

"M" - 指令作為注釋使用（不常用）

可以是以上值的組合，如 restrict: "EA" 表示指令既可以作為屬性使用，也可以作為元素使用。

關于 scope 選項將會在后面的指令 scope 中細說。

一般情況下不需要使用指令的 controller，只要使用 link 就夠了，后面會細說 link 函數。

用 controller 的場景是該指令（a）會被其他指令（b）require 的時候，在 b 的指令里可以傳入 a 的這個 controller，目的是為了指令間的復用和交流。而 link 只能在指令內部中定義行為，無法做到這樣。

為控制器指定別名，這樣可以在需要控制器的地方使用該名字進行注入。

表示指令依賴于一個或多個指令，并注入所依賴指令的控制器到 link 函數的第四個參數中。如果所依賴的指令不存在，或所依賴指令的控制器不存在則會報錯。

依賴名稱前綴可以為：

(沒有前綴) - 在當前元素中查找依賴指令的控制器，如果不存在則報錯。

? - 在當前元素中查找依賴指令的控制器，如果不存在傳 null 到 link 中。

^ - 在當前元素及父元素中查找依賴指令的控制器，如果不存在則報錯。

?^ - 在當前元素及父元素中查找依賴指令的控制器，如果不存在傳 null 到 link 中。

例子：

app.directive("validate", [
    function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, ele, attrs, ngModelCtrl) {
                // 監聽值變化
                ngModelCtrl.$viewChangeListeners.push(function () {
                    scope.validateResult = ngModelCtrl.$viewValue === "Heron";
                });
            }
        };
    }
]);

app.controller("myCtrl", [
    "$scope",
    "$cookieStore",
    function ($scope, $cookieStore) {
        $scope.name = "Heron";

        $scope.sayHi = function (name, age) {
            alert("Hello " + name + ", your age is " + age);
        }
    }
]);

    
    

        validate 結果：{{validateResult}}
    

運行結果如圖：

創建的創建過程可以分為編譯(compile)階段和鏈接(link)階段，因此兩者放一起講。

兩者區別在于：

compile 函數的作用是對指令的模板進行轉換。

link 函數的作用是在視圖和模型之間建立關聯，包括注冊事件監聽函數和更新 DOM 操作。

scope 在鏈接階段才會被綁定到元素上，因此 compile 函數中沒有入參 scope。

對于同一個指令的多個示例，compile 函數只會執行一次，而 link 函數在每個實例中都會執行。

如果自定義了 compile 函數，則自定義的 link 函數 無效，而是使用 compile 函數 返回的 link 函數。

scope 選項有三種值：

false - 使用父 scope。改變父 scope 會影響指令 scope，反之亦然。

true - 繼承父 scope，并創建自己的 scope。改變父 scope 會影響指令 scope，而改變指令 scope 不會影響父 scope。

{} - 不繼承父 scope，創建獨立的 scope。如果不使用雙向綁定策略(后面會講)，改變父 scope 不會影響指令 scope，反之亦然。

例子：

app.controller("myCtrl", [
    "$scope",
    "$cookieStore",
    function ($scope, $cookieStore) {
        $scope.scopeFalse = "Heron";
        $scope.scopeTrue = "Heron";
        $scope.scopeObject = "Heron";
    }
]);
 
app.directive("directiveFalse", [
    function () {
        return {
            restrict: "EA",
            scope: false,
            template: 
                "

                    

                        指令 scope: 
                        
                    
                
"
        };
    }
]);
app.directive("directiveTrue", [
    function () {
        return {
            restrict: "EA",
            scope: true,
            template: 
                "

                    

                        指令 scope: 
                        
                    
                
"
        };
    }
]);
app.directive("directiveObject", [
    function () {
        return {
            restrict: "EA",
            scope: {},
            template: 
                "

                    

                        指令 scope: 
                        
                    
                
",
            link: function (scope) {
                // 由于使用獨立scope，因此需要自己定義變量
                scope.scopeObject = "Heron";
            }
        };
    }
]);

    
scope: false
    

        父 scope: 
        
    
    
    
scope: true
    

        父 scope: 
        
    
    
    
scope: {}
    

        父 scope: 
        
    
    

運行結果如圖：

針對獨立 scope，可以通過在對象中聲明如何從外部傳入參數。有以下三種綁定策略：

@ - 使用 DOM 屬性值單項綁定到指令 scope 中。此時綁定的值總是一個字符串，因為 DOM 的屬性值是一個字符串。

scope: {
    age: "@"
}

= - 在父 scope 和指令 scope 之間建立雙向綁定。

scope: {
    age: "="
}

& - 使用父 scope 的上下文執行函數。一般用于綁定函數。

scope: {
    sayHi: "&"
}

綁定函數時，有時需要向指令外部傳遞參數，如下：

app.controller("myCtrl", [
    "$scope",
    "$cookieStore",
    function ($scope, $cookieStore) {
        $scope.name = "Heron";

        $scope.sayHi = function (name, age) {
            alert("Hello " + name + ", your age is " + age);
        };
    }
]);

app.directive("myDirective", [
    function () {
        return {
            restrict: "E",
            replace: true,
            scope: {
                clickMe: "&"
            },
            template: 
                "

                    點我
                
",
            link: function (scope) {
                scope.age = 26;
            }
        };
    }
]);

運行結果如圖：

說明一下：首先聲明 clickMe: "&" 使用父 scope 的環境執行 clickMe 函數，然后在傳遞給指令時聲明 click-me="sayHi(name, age)"，表示父 scope 的 sayHi 方法需要兩個參數，一個是 name，一個是 age，然后再指令中使用對象 {} 的方式向外傳遞參數，如 ng-click="clickMe({ age: age })"，表示向指令外傳遞 age 參數，sayHi 方法從指令拿到 age 參數，再從自己的上下文中拿到 name 參數。

AngularJS 指令的開發和使用千變萬化，也有許多坑，希望大家留意，也希望大家能在評論區多多交流心得。