這節主要說一下Angular的指令。Angular的指令有內置指令和自定義指令。

一、內置指令

在 Angular 中通過指令對DOM的功能進行擴展。這也是對常用功能的模塊化封裝。Angular 提供了一系列常用的指令，這些指定都是以 ng 開頭的，我們稱為內置指令。

後面會講到如何自定義指令。其實內置指令和自定義指令是沒有區別的，只是angular已經幫我們定義好了。

預設指令有如下幾種常用的：

• ng-app 啟用一個模塊
• ng-model 雙向綁定數據
• ng-init 直接初始化生成一個 scope
• ng-controller 調用 controller
• ng-click 綁定click事件
• ng-href
• ng-src
• ng-disabled
• ng-checked
• ng-readonly
• ng-selected
• ng-class
• ng-style

以 ng-click 為例，這樣使用：

 <div ng-click=“onClick()”></div>

二、自定義指令（directive）

我們完全可以只依賴angular內置的指令，以及自己寫的各種 controller 來完成一個應用。但是這樣就無法復用一些通用的視圖邏輯。

在 Angular 中，通過指令來拓展DOM元素的功能。我們可以把通用的邏輯封裝成指令，在不同的地方都可以調用這些指令。比如我們可以把 分頁器封裝成一個指令，使用分頁器的時候就不需要寫複雜的邏輯，只要像下麵這樣指定幾個參數即可：

 <div pagination page-total=‘100’ page-current=’20’></div>

這樣就會調用 pagination 指令自動生成一個分頁器，並通過兩個屬性告訴它總頁數是100，當前是第20頁。

那麼我們這樣編寫指令：

.directive("pagination", function() {

    return {

      restrict: "EA",

      template:

        "<div>\

          <button ng-click='prev()' ng-disabled='!hasPrev()'>prev</button>\

          <span>{{current}}</span>\

          <button ng-click='next()' ng-disabled='!hasNext()'>next</button>\

        <div>",

      replace: true,

      scope: {

        total: "@pageTotal",

        current: "@pageCurrent"

      },

      link: function($scope) {

        $scope.total = parseInt($scope.total);

        $scope.current = parseInt($scope.current);

        $scope.prev = function() {

          $scope.current --;

        }

        $scope.next = function() {

          $scope.current ++;

        }

        $scope.hasNext = function() {

          return $scope.current < $scope.total;

        }

        $scope.hasPrev = function() {

          return $scope.current > 0;

        }

      }

    }

  })

其中， 我們定義了一個 pagination 指令，返回的一個對象描述了這個指令的全部定義。我們一點一點看：

restrict: “EA”表示這個指令可以通過元素名或者屬性名的方式來使用，可選值有“EAC”三種，分別是Element,Attribute 和 Class 的縮寫。

template 表示這個指令對應的模板，結合下麵的replace: true會直接講使用此指令的dom換成對應的模板。

scope是一個JSON對象，表示為這個指令創建了一個隔離的作用域，其中通過@語法把 DOM 中的屬性複製到scope對象中。

link是一個鏈接函數，一般我們指令中的邏輯代碼寫在鏈接函數中。當Angular完成模塊編譯和數據綁定之後，會調用link函數進行鏈接。這裡我們定義了四個函數，用來進行頁面跳轉動作和跳轉條件的判斷。

看完這個分頁器指令基本就能知道一個指令的基本組成，一般一個指令的最重要部分就是模板、作用域和鏈接函數。如果你在這個模板上聲明瞭一個 controller ，那麼這裡的作用域其實就是 controller的作用域。不過由於angular限制一個DOM上只能綁定一個隔離作用域，所以這裡如果聲明瞭一個controller，則無法再在 指令中聲明隔離作用域。