前言

使用指令的優(yōu)勢(shì)在于箱吕，我們無(wú)需太多關(guān)心指令的內(nèi)部實(shí)現(xiàn)（當(dāng)給 Angular 應(yīng)用添加所需指令后象颖，Angular 內(nèi)部會(huì)自行編譯和運(yùn)行所有指令）善延，只需把重點(diǎn)放在如何使用指令上即可声功。

對(duì)于指令叛复，我們需要了解一下幾個(gè)問(wèn)題：

1. 什么是指令？
2. 如何創(chuàng)建指令家厌？
3. 指令是如何編譯和運(yùn)行的播玖？

什么是指令?

指令就是 AngularJS 擴(kuò)展具有自定義功能的 HTML 元素的途徑，指令又分為內(nèi)置指令和自定義指令像街。

內(nèi)置指令

AngularJS 提供了一系列的內(nèi)置指令黎棠。其中一些指令重載了原生 HTML 元素晋渺，比如： <form> 和 <a> 標(biāo)簽，當(dāng)在 HTML 中使用標(biāo)簽時(shí)脓斩，并不一定可以明確看出是否在使用指令木西。

基礎(chǔ) ng 屬性指令

布爾屬性

根據(jù) HTML 標(biāo)準(zhǔn)的定義，布爾屬性代表了 true 或 false随静。當(dāng)這個(gè)屬性出現(xiàn)時(shí)即為 true八千，未出現(xiàn)為 false。AngularJS 提供了一組布爾屬性燎猛，通過(guò)表達(dá)式的值來(lái)判斷是否在元素上插入或移除該屬性恋捆。

1. ng-disabled
   使用 ng-disabled 可以對(duì) disabled 屬性進(jìn)行綁定。
2. ng-readonly
   使用 ng-readonly 可以對(duì) readonly 屬性進(jìn)行綁定重绷。
3. ng-checked
   使用 ng-checked 可以對(duì) checked 屬性進(jìn)行綁定沸停。
4. ng-selected
   使用 ng-selected 可以對(duì) option 標(biāo)簽中的 selected 屬性進(jìn)行綁定。

  <div ng-controller='MyApp'>
        <p><button ng-disabled="isDisabled">ng-disabled = true</button></p>
        <p><button ng-disabled="!isDisabled">ng-disabled = false</button></p>
        <p><input type="text" ng-readonly="isReadonly" value="ng-readonly = true"></p>
        <p><input type="text" ng-readonly="!isReadonly" value="ng-readonly = false"></p>
        <p><input type="checkbox" ng-checked="isChecked">ng-checked = true</p>
        <p><input type="checkbox" ng-checked="!isChecked">ng-checked = false</p>
        <p>
            <select>
                <option>ng-selected = false</option>
                <option ng-selected="isSelected">ng-selected = true</option>
            </select>
        </p>
    </div>

angular.module('myApp', [])
        .controller('MyApp', ['$scope', function ($scope) {
            $scope.isDisabled = true;
            $scope.isReadonly = true;
            $scope.isChecked = true;
            $scope.isSelected = true;
        }])

注： 不是將屬性值設(shè)為 true 或 false昭卓，而是該屬性是否出現(xiàn)愤钾。

類(lèi)布爾屬性

ng-href 、ng-src 等屬性雖然不是標(biāo)準(zhǔn)的 HTML 布爾屬性候醒，但是由于行為相似能颁，所以 AngularJS 是和布爾屬性同等對(duì)待的。

1. ng-href
   當(dāng) url 為動(dòng)態(tài)綁定時(shí)倒淫，應(yīng)使用 ng-href 代替 href伙菊，AngularJS 會(huì)在鏈接生效后再執(zhí)行點(diǎn)擊行為。
2. ng-src
   當(dāng) src 地址為動(dòng)態(tài)綁定時(shí)敌土，應(yīng)使用 ng-src 代替 src镜硕，AngularJS 會(huì)告訴瀏覽器，在 ng-src 對(duì)應(yīng)的表達(dá)式生效之前不要加載圖像纯赎。

在指令中使用子作用域

ng-app 和 ng-controller 是特殊的指令谦疾，因?yàn)樗麄儠?huì)修改嵌套在它們內(nèi)部的指令的作用域南蹂。

1. ng-app
   任何具有 ng-app 屬性的 DOM 元素將會(huì)被標(biāo)記為 $rootScope（$rootScope 是作用域鏈的起始點(diǎn)犬金，任何嵌套在 ng-app 內(nèi)的指令都會(huì)繼承它）的起始點(diǎn)。
   注：如果需要在一個(gè)頁(yè)面中放置多個(gè) AngularJS應(yīng)用六剥，需要手動(dòng)引導(dǎo)應(yīng)用晚顷。
2. ng-controller
   在 DOM 元素上放置一個(gè)控制器，為嵌套在其中的指令創(chuàng)建一個(gè)子作用域疗疟，避免將所有操作和模型都定義在 $rootScope 上该默。
   ng-controller 接收一個(gè)必備參數(shù) expression（一個(gè) AngularJS 表達(dá)式）。
   以下內(nèi)置指令具有同樣的特性：
3. ng-include
   使用 ng-include 可以加載策彤、編譯并包含外部 HTML 片段到當(dāng)前應(yīng)用中栓袖。
4. ng-switch
ng-switch 和 ng-switch-when 及 on="propertyName" 一起使用匣摘，可以在 propertyName 發(fā)生變化時(shí)渲染不同指令到視圖中。

<input type="text" ng-model='person.name'>
<div ng-switch on='person.name'>
    <p ng-switch-default>默認(rèn)顯示</p>
    <p ng-switch-when='show'>滿(mǎn)足條件顯示</p>
</div>

5. ng-view
ng-view 用來(lái)設(shè)置將被路由管理和放置在 HTML 中的視圖的位置裹刮。
6. ng-if
ng-if 可以根據(jù)表達(dá)式的值在 DOM 中生成或移除一個(gè)元素音榜。
7. ng-repeat
ng-repeat 用來(lái)遍歷一個(gè)集合或?yàn)榧现械拿總€(gè)元素生成一個(gè)模板實(shí)例。

• $index：遍歷索引（0 ~ length - 1）捧弃。
• $first：當(dāng)元素為遍歷的第一個(gè)時(shí)值為 true赠叼。
• $middle：當(dāng)元素處于第一個(gè)和最后一個(gè)之間時(shí)值為 true。
• $last：當(dāng)元素為遍歷的最后一個(gè)時(shí)值為 true违霞。
• $even：當(dāng) $index 的值為偶數(shù)是值為 true嘴办。
• $odd：當(dāng) $index 的值為奇數(shù)是值為 true。

.even {
    background: #abcdef;
}
.odd {
    background: #eee;
}
.first {
    background: #ff0;
}
.last {
    background: #f00;
}

<p  ng-repeat="val in list" 
    ng-class="{even: $even, odd: $odd, first: $first, last: $last}">{{$index}}</p>

8. ng-init
ng-init 用來(lái)設(shè)置指令被調(diào)用時(shí)的內(nèi)部作用域的初始狀態(tài)买鸽。
9. {{ }}
{{ }} 是 AngularJS 內(nèi)置的模板語(yǔ)法涧郊，在 $scope 和視圖之間創(chuàng)建綁定，$scope 變化時(shí)眼五，視圖就會(huì)隨之自動(dòng)更新底燎。
   注： {{ }} 實(shí)際上是 ng-bind 的簡(jiǎn)略形式，但在屏幕可視區(qū)內(nèi)使用 {{ }} 會(huì)導(dǎo)致頁(yè)面加載時(shí)未渲染的元素發(fā)生閃爍弹砚，用 ng-bind 可以避免這個(gè)問(wèn)題双仍。
10. ng-bind
    同 {{ }}。
11. ng-cloak
    除了使用 ng-bind 來(lái)避免閃爍外桌吃，還可以在含有 {{ }} 的元素上使用 ng-cloak 指令朱沃。
12. ng-bind-template
    同 ng-bind 類(lèi)似，ng-bind-template 用來(lái)在視圖中綁定多個(gè)表達(dá)式茅诱。

<p ng-bind-template='{{name}}  {{position}}'></p>

13. ng-model
ng-model 用來(lái)將表單控件同包含它們的作用域中的屬性進(jìn)行綁定逗物。
14. ng-show / ng-hide
ng-show 和 ng-hide 是通過(guò) CSS 控制元素的顯隱（ng-if 則是通過(guò)添加或移除 dom）。
15. ng-change
    在表單輸入發(fā)生變化時(shí)觸發(fā)瑟俭。需要與 ng-model 一起使用翎卓。
16. ng-form
ng-form 用來(lái)在一個(gè)表單內(nèi)部嵌套另一個(gè)表單。普通的 HTML <form> 標(biāo)簽不允許嵌套摆寄，但是 ng-form 可以（所以失暴，只有內(nèi)部所有子表單都合法時(shí)，外部表單才合法）微饥。
    下列 CSS 類(lèi)會(huì)根據(jù)表單的驗(yàn)證狀態(tài)自動(dòng)設(shè)置：

• 表單合法時(shí)設(shè)置 ng-valid
• 表單不合法時(shí)設(shè)置 ng-invalid
• 表單未進(jìn)行修改時(shí)設(shè)置 ng-pristion
• 表單進(jìn)行過(guò)修改時(shí)設(shè)置 ng-dirty

input {
    margin-bottom: 10px;
}
input.ng-invalid {
    border: 1px solid red;
}
input.ng-valid {
    border: 1px solid green;
}

<form name="signup_form" ng-controller="FormCtrl" ng-submit="submitForm()" novalidate>
    <div ng-repeat="field in fields" ng-form="signup_form_input">
        <input type="text"
                name="dynamic_input"
                ng-required="field.isRequired"
                ng-model="field.name"
                placeholder="{{field.placeholder}}" />
        <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
            <span class="error" ng-show="signup_form_input.dynamic_input.$error.required">必填項(xiàng)</span>
        </div>
    </div>
    <button type="submit" ng-disabled="signup_form.$invalid">提交</button>
</form>

angular.module('myApp', [])
    .controller('FormCtrl', function($scope) {
    $scope.fields = [
        {placeholder: '請(qǐng)輸入用戶(hù)名', isRequired: true},
        {placeholder: '請(qǐng)輸入密碼', isRequired: true},
        {placeholder: '請(qǐng)輸入郵箱(選填)', isRequired: false}
    ];
    $scope.submitForm = function() {
        alert("it works!");
    };
});

17. ng-click
ng-click 用來(lái)指定元素被點(diǎn)擊是所觸發(fā)的事件逗扒。
18. ng-select
ng-select 用來(lái)將數(shù)據(jù)同 HTML 的 <select> 元素進(jìn)行綁定∏烽伲可以和 ng-model 及 ng-options 一同使用矩肩。
    ng-options 的值可以使一個(gè)內(nèi)涵表達(dá)式（comprehension expression），簡(jiǎn)單來(lái)說(shuō)就是它可以接受一個(gè)數(shù)組或?qū)ο笏嘈?duì)它們進(jìn)行循環(huán)黍檩，將內(nèi)部?jī)?nèi)容提供給 select 標(biāo)簽內(nèi)部的選項(xiàng)叉袍。

(1). 數(shù)組作為數(shù)據(jù)源：

• 用數(shù)組中的值做標(biāo)簽
• 用數(shù)組中的值作為選中的標(biāo)簽
• 用數(shù)組中的值做標(biāo)簽組
• 用數(shù)組中的值作為選中的標(biāo)簽組

(2). 對(duì)象作為數(shù)據(jù)源：

• 用對(duì)象的鍵 - 值（key - value）做標(biāo)簽
• 用對(duì)象的鍵 - 值作為選中的標(biāo)簽
• 用對(duì)象的鍵 - 值做標(biāo)簽組
• 用對(duì)象的鍵 - 值作為選中的標(biāo)簽組

<div ng-controller="Directive">
    <select ng-model="item" ng-options="item.name for item in list">
        <option value="">who</option>
    </select>
    <p>Winner：{{item.name}}</p>
</div>

angular.module('directive', [])
        .controller('Directive', Directive);
    Directive.$inject = ['$scope'];
    function Directive ($scope) {
        $scope.list = [
            {
                id: 1,
                name: 'player1'
            }, {
                id: 2,
                name: 'player2'
            }, {
                id: 3,
                name: 'player3'
            }
        ];
    }

19. ng-submit
ng-submit 用來(lái)將表達(dá)式同 onsubmit 時(shí)間進(jìn)行綁定。這個(gè)指令會(huì)阻止默認(rèn)行為（發(fā)送請(qǐng)求并重新加載頁(yè)面）刽酱，但前提是表單不含有 action 屬性畦韭。
20. ng-class
ng-class 可以動(dòng)態(tài)設(shè)置元素的類(lèi)，給要?jiǎng)討B(tài)添加的類(lèi)綁定一個(gè)表達(dá)式肛跌，當(dāng)表達(dá)式為 true 時(shí)艺配，這個(gè)類(lèi)會(huì)被添加，反之會(huì)被移除衍慎。
21. ng-attr-(suffix)
    當(dāng) AngularJS 編譯 DOM 時(shí)會(huì)查找花括號(hào) {{ some expression }} 內(nèi)的表達(dá)式转唉。這些表達(dá)式會(huì)被自動(dòng)注冊(cè)到 $watch 服務(wù)中并更新到 $digest 循環(huán)中，成為他的一部分：

<p>{{title}}</p>

有時(shí)候?yàn)g覽器會(huì)對(duì)屬性進(jìn)行嚴(yán)格限制稳捆，如 SVG

<svg>
    <circle cx="{{ cx }}"></circle>
</svg>

此時(shí)會(huì)報(bào)錯(cuò)赠法，指出有一個(gè)非法屬性。這時(shí)可以用 ng-attr-(suffix) 解決乔夯。

<svg>
    <circle ng-attr-cx="{{ cx }}"></circle>
</svg>

22. ng-style
ng-style 為 HTML 元素添加 style 屬性砖织，且屬性值必須是對(duì)象。

<p ng-style="{{style}}"></p>

$scope.style = {
    width: '100px',
    height: '100px',
    background: '#000'
}

自定義指令

定義一個(gè)指令

angular.module('directive', [])
    .directive('myDirective', myDirective);

function myDirective () {
    // 一個(gè)指令定義對(duì)象
    return {
        // 通過(guò)設(shè)置項(xiàng)定義指令
    }
}

directive() 方法接收兩個(gè)參數(shù)：

1. name (字符串)
   指令的名字末荐，用來(lái)在視圖中引用該指令侧纯。
2. factory_function (函數(shù))
   該函數(shù)返回一對(duì)象，在其中定義這個(gè)指令的全部行為甲脏。$compile 服務(wù)利用這個(gè)方法返回的對(duì)象眶熬，在 DOM 調(diào)用指令時(shí)來(lái)構(gòu)造指令的行為。

指令的配置項(xiàng)

angular.module('directive', [])
    .directive('myDirective', myDirective);

function myDirective () {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function: function (tElement, tAttrs) {},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or function (scope, element, attrs, transclude, otherInjectables) {},
        controllerAs: String,
        require: String,
        link: function (scope, iElement, iAttrs) {},
        compile: // 返回一個(gè)對(duì)象或連接函數(shù)
            function (tElement, tAttrs, transclude) {
                return {
                    pre: function (scope, iElement, iAttrs, controller) {},
                    post: function (scope, iElement, iAttrs, controller) {}
                }
                // 或者
                return function postLink () {}
            }
    }
}

• restrict (String)
  restrict 告訴 AngularJS 該指令以何種形式在 DOM 中被聲明（默認(rèn) A）块请。
  E - 以元素形式聲明
  <my-directive></my-directive>
  C - 以類(lèi)名形式聲明
  <div class="my-directive"></div>
  M - 以注釋形式聲明
  < !-- directive:my-directive -- >
  A - 以屬性形式聲明
  <div my-directive></div>

• priority (Number)
  priority 可以用來(lái)設(shè)置指令的優(yōu)先級(jí)娜氏，默認(rèn) 0，通常情況下會(huì)忽略該屬性墩新，使用默認(rèn)值（但也有場(chǎng)景需要設(shè)置高優(yōu)先級(jí)贸弥，如 ng-repeat 的該參數(shù)為 1000，所以它總是在其他指令之前被調(diào)用海渊；若優(yōu)先級(jí)一直绵疲，則先聲明先調(diào)用）。

• terminal (Boolean)
  terminal 可以用來(lái)阻止當(dāng)前元素上比自己優(yōu)先級(jí)低的指令切省。
  例：ngIf 的優(yōu)先級(jí)略高于 ngView最岗， 如果 ngIf 表達(dá)式值為 true帕胆， 則 ngView 會(huì)正常執(zhí)行朝捆，反之，由于 ngView 優(yōu)先級(jí)較低就不會(huì)被執(zhí)行懒豹。

• template (String or Function)
  template 為可選參數(shù)芙盘，可以為：

  1. 一段 HTML 文本驯用；
  2. 一個(gè)可以接受兩個(gè)參數(shù)（tElement，tAttrs）的函數(shù)儒老，并返回一個(gè)代表模板的字符串蝴乔。tElement，tAttrs 中的 t 代表 template驮樊。
     注：模板字符串中必須只存在一個(gè)根 DOM 元素

template: '<div>template</div>',

折行時(shí)需在末尾加上反斜線(xiàn)薇正，這樣才能正確解析多行字符串。

template: '<div>\
               template\
               <p>wrap</p>\
           </div>',

• templateUrl (String or Function)
  templateUrl 為可選參數(shù)囚衔，可以為：

  1. 一個(gè)代表外部 HTML 文件路徑的字符串挖腰；
  2. 一個(gè)可以接受兩個(gè)參數(shù)的函數(shù)，參數(shù)為 TElement 和 tAttrs练湿，并返回一個(gè)外部 HTML 文件路徑的字符串猴仑。

• replace (Boolean)
  replace 為可選參數(shù)，如果設(shè)置這個(gè)參數(shù)肥哎，值必須為 true（默認(rèn)為 false）辽俗。
  若值為 false 則意味著模板會(huì)被當(dāng)做子元素插入到調(diào)用此指令的元素內(nèi)部：
  

若值為 true 則意味著模板會(huì)替換調(diào)用此指令的元素：

• scope (Boolean or Object)
  scope 為可選參數(shù)，可以設(shè)置為 true 或一個(gè)對(duì)象（默認(rèn)為 false）篡诽。
  若值為 true崖飘，會(huì)從父作用域繼承并創(chuàng)建一個(gè)新的作用域?qū)ο蟆?br> 每個(gè)指令被調(diào)用時(shí)可能會(huì)：
  (1). 默認(rèn)值 false，繼承父作用域不創(chuàng)建新作用域（互相影響）杈女；

<div ng-app='myApp'>
  <div ng-controller='MyCtrl'>
    父：{{value}}
    <directive-dom></directive-dom>
  </div>
</div>
<script>
  angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
      $scope.value = 1;
    }])
    .directive('directiveDom', function () {
      return {
        restrict: 'ECMA',
        template: '<div><input type="type" ng-model="value" />子：{{value}}</div>',
        scope: false
      }
    });
</script>

默認(rèn)值 `false`

(2). scope: true坐漏，創(chuàng)建一個(gè)新的繼承父作用域的新的獨(dú)立作用域（互不影響）；

<div ng-app='myApp'>
  <div ng-controller='MyCtrl'>
    父：{{value}}
    <directive-dom></directive-dom>
  </div>
</div>
<script>
  angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
      $scope.value = 1;
    }])
    .directive('directiveDom', function () {
      return {
        restrict: 'ECMA',
        template: '<div><input type="type" ng-model="value" />子：{{value}}</div>',
        scope: true
      }
    });
</script>

scope: true

(3). scope: {} / {...}：
a.{}：創(chuàng)建一個(gè)隔離父作用域的新作用域

<div ng-app='myApp'>
  <div ng-controller='MyCtrl'>
    父：{{value}}
    <directive-dom></directive-dom>
  </div>
</div>
<script>
  angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
      $scope.value = 1;
    }])
    .directive('directiveDom', function () {
      return {
        restrict: 'ECMA',
        template: '<div><input type="type" ng-model="value" />子：{{value}}</div>',
        scope: {}
      }
    });
</script>

scope: {}

b. {...}：可以與父作用域的屬性方法進(jìn)行綁定
綁定的三種形式：
@ （or @attr）：綁定字符串
= （or =attr）：雙向綁定
& （or &attr）：綁定方法

<div ng-app='myApp'>
  <div ng-controller="MyCtrl">
    選手 {{obj.id}} 的成績(jī)?yōu)椋?{{obj.value}}
    <directive-dom obj="obj" str="綁定字符串" fn="fn(num)"></directive-dom>
  </div>
</div>
<script>
    (function () {
        'use strict';
        angular
            .module('myApp', [])
            .controller('MyCtrl', MyCtrl)
            .directive('directiveDom', directiveDom);
        MyCtrl.$inject = ['$scope'];
        function MyCtrl($scope) {
            $scope.obj = {
                value: 85,
                id: 1
            };
            $scope.fn = function (num) {
                console.log('我被點(diǎn)擊了' + num + '次');
            };
        }
        function directiveDom() {
            return {
                restrivt: 'ECMA',
                template: '<div><button ng-click="nextHandle()">下一位</button><p>{{str}}</p></div>',
                scope: {
                    str: '@',
                    obj: '=',
                    fn: '&'
                },
                link: function ($scope) {
                    var n = 0;
                    $scope.nextHandle = function () {
                        n = n + 1;
                        $scope.obj.id = $scope.obj.id < 10 ? $scope.obj.id + 1 : 1;
                        $scope.obj.value = $scope.obj.id < 10 ? Math.floor(Math.random() * 100 + 1) : 85;
                        $scope.fn({num: n});
                    }
                }
            }
        }
    })();
</script>

scope: {...}

• transclude (Boolean or Object)
  transclude 設(shè)置是否將指令內(nèi)部的元素嵌入到模板中碧信，可選參數(shù)赊琳，如果設(shè)置這個(gè)參數(shù)，默認(rèn)為 false砰碴。
• controller (String or function)
  controller 為字符串時(shí)躏筏，會(huì)以字符串的值為名字，查找注冊(cè)在應(yīng)用中的控制器構(gòu)造函數(shù)呈枉，也可以通過(guò)匿名構(gòu)造函數(shù)的方式定義一個(gè)內(nèi)聯(lián)控制器（可以向其中注入任意 AngularJS 服務(wù)）趁尼。
  (1). $scope：與指令元素相關(guān)聯(lián)的作用域；
  (2). $element：當(dāng)前指令對(duì)應(yīng)的元素猖辫；
  (3). $attrs：由當(dāng)前元素的屬性組成的對(duì)象酥泞；
  (4). $transclude：嵌入鏈接函數(shù)會(huì)與對(duì)應(yīng)的嵌入作用域進(jìn)行預(yù)綁定（transclude 鏈接函數(shù)是實(shí)際被執(zhí)行用來(lái)克隆元素和操作 DOM 的函數(shù)）。

angular.module('myApp', [])
  .directive('directiveDom', function () {
    return {
      restrivt: 'ECMA',
      controller: function ($scope, $element, $attrs, $transclude) {

      }
    }
  });

注：controller 主要是用來(lái)提供可以在指令間復(fù)用的行為啃憎，link 只能在當(dāng)前內(nèi)部指令中定義行為芝囤，無(wú)法在指令間復(fù)用

• controllerAs (String)
  controllerAs 用來(lái)設(shè)置控制器別名
• require (String or Array)
  require 可以將 controller 注入到其值所指定的指令中，并作為當(dāng)前指令 link 的第四個(gè)參數(shù)，設(shè)置為字符串時(shí)悯姊，代表另外一個(gè)指令的名字羡藐。
  require 參數(shù)值的修飾前綴：
  (1).?：在當(dāng)前指令進(jìn)行搜索（如果沒(méi)有會(huì)傳入 null）；
  (2).^：在上游指令鏈中進(jìn)行搜索悯许；
  (3).?^：可以選擇地加載需要的指令并在父指令鏈中進(jìn)行搜索仆嗦；
  (4).無(wú)：在自身所提供的控制器中進(jìn)行搜索（如果沒(méi)有會(huì)拋出一個(gè)錯(cuò)誤）。
• compile (Object or Function)
  通常情況下先壕，設(shè)置 compile 函數(shù)是希望在指令和實(shí)時(shí)數(shù)據(jù)被放到 DOM 中之前進(jìn)行 DOM 操作（編譯函數(shù)負(fù)責(zé)對(duì)模板 DOM 進(jìn)行轉(zhuǎn)換）瘩扼。
  注：compile 和 link 是互斥的，如果同時(shí)設(shè)置垃僚，則 link 會(huì)被忽略邢隧。
• link (Function)
  如果指令中有 require 選項(xiàng)，則第四個(gè)參數(shù)代表控制器或所依賴(lài)的指令的控制器冈在，若 require 選項(xiàng)為一個(gè)指令數(shù)組倒慧，則第四個(gè)參數(shù)代表由每個(gè)指令所對(duì)應(yīng)的控制器所組成的數(shù)組（鏈接函數(shù)負(fù)責(zé)將作用域和 DOM 進(jìn)行鏈接）。
  (1). scope：作用域包券；
  (2). iElement：實(shí)例元素纫谅，即使用此指令的元素；
  (3). iAttrs：實(shí)例屬性（可以在所有指令的鏈接函數(shù)間共享）溅固；
  (4). controller：指向 require 選項(xiàng)所定義的控制器（可以在所有指令間共享）付秕。

參考資料：
《Angular JS 權(quán)威教程》