“指令屬性”就是綁定在DOM元素上的函數(shù)，它可以調(diào)用方法、定義行為、綁定controller及$scope對象、操作DOM，等等等等。

當瀏覽器啟動、開始解析HTML（像平時一樣）時，DOM元素上的指令屬性就會跟其他屬性一樣被解析。

當一個Angular.js應用啟動，Angular編譯器就會遍歷DOM樹（從有ng-app指令屬性的那個DOM元素開始，如我們在本系列第一篇里所提過的），解析HTML，尋找這些指令屬性函數(shù)。

當在一個DOM元素上找到一個或多個這樣的指令屬性函數(shù)，它們就會被收集起來、排序，然后按照優(yōu)先級順序被執(zhí)行。

每個指令屬性都有自己的優(yōu)先級，在我們關(guān)于指令屬性的專題文章里（http://www.ng-newsletter.com/posts/directives.html），你可以找到更深入的信息。

Angular.js應用的動態(tài)性和響應能力，都要歸功于指令屬性。之前我們已經(jīng)看過一些指令屬性的用例：

ng-model

<input ng-model="name" name="Name" placeholder="Enter your name"/>
<h4>Your name: {{ name }}</h4>

試試看

ng-model指令屬性（我們在之前的章節(jié)使用過它），被用來將DOM文本輸入框的值，跟controller里的$scope model綁定起來。具體的實現(xiàn)過程，是在這個值上綁定了一個$watch函數(shù)（類似JavaScript里的事件監(jiān)聽函數(shù)）。

$watch函數(shù)（在使用時）運行在Angular.js的事件循環(huán)（即$digest循環(huán)）里，讓Angular.js能夠?qū)OM進行相應的更新。請關(guān)注我們關(guān)于$digest循環(huán)的高級文章！

在Angular.js應用的開發(fā)中，我們用指令屬性來將行為綁定到DOM上。指令屬性的使用，是一個 應用能否擁有動態(tài)性、響應能力的關(guān)鍵。Angular.js提供了很多缺省的指令屬性，現(xiàn)在讓我們來看看其中幾個，以及如何使用它們。

幾個常見的指令屬性：

{{ 表達式 }}

這個雙大括號指令屬性，使用$watch()函數(shù)，給括號內(nèi)的表達式注冊了一個監(jiān)聽器。正是這個$watch函數(shù)，讓Angular.js能夠?qū)崟r自動更新view。

那么，到底什么算是個表達式？
要想理解指令屬性的運作，我們必須先理解表達式，所以這里我們就繞個路，看看本系列的第五部分——表達式。在之前的例子里我們已經(jīng)見過表達式，例如 {{ person.name }} 和 {{ clock }}。

{{ 8 + 1 }}9
{{ person }}{"name":"Ari Lerner"}
{{ 10 * 3.3 | currency }}$33.00

最后的例子里 (10 * 3.3 | currency) 用了一個過濾器。本系列之后的部分，會深入介紹過濾器。

表達式粗略來看有點像 eval(javascript) 的結(jié)果。它們會經(jīng)過Angular.js的處理，從而擁有以下重要而獨特的性質(zhì)：

所有表達式都在scope這個context里被執(zhí)行，因此可以使用所有本地 $scope 中的變量。
如果一個表達式的執(zhí)行導致類型錯誤或引用錯誤，這些錯誤將不會被拋出。
表達式里不允許任何控制函數(shù)流程的功能（如if/else等條件語句）
表達式可接受一個或多個串聯(lián)起來的過濾器。
試試看

試試輸入“person“,“clock“或其他數(shù)學算式如2+4。你甚至可以操作scope，例如，試試輸入person.name = ”Ari”; person.age = 28; person 或 clock

表達式都運行在調(diào)用它們的scope里，所以一個表達式可訪問并操作其scope上的一切。由此，你可以使用表達式遍歷其scope的屬性（我們在ng-repeat中會看到這一應用）、調(diào)用scope里的函數(shù)，或者對scope中的變量進行數(shù)學運算。

現(xiàn)在，讓我們回到指令屬性…

ng-init

ng-init指令屬性是一個在啟動時運行的函數(shù)（在程序進入運行階段之前）。它讓我們能夠在程序運行前設定初始變量的值：

<b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</b>

試試看

Hello, Ari Lerner

ng-click

ng-click指令屬性給DOM元素注冊了一個點擊事件的監(jiān)聽器。當此DOM元素上有點擊事件發(fā)生（即當此button或link被點擊時），Angular.js就會執(zhí)行表達式的內(nèi)容，并相應地更新view。

<button ng-click="counter = counter + 1">Add one</button>
Current counter: {{ counter }}

試試看

我們也可以用ng-click 來調(diào)用在controller里寫好并綁定在$scope上的函數(shù)，例如：

<button ng-click="sayHello()">Say hello</button>

controller 里的函數(shù):

app.controller('MyController', function($scope) {
  $scope.sayHello = function() {
   alert("hello!");
  }
 });

試試看

ng-show / ng-hide

ng-show和ng-hide指令，根據(jù)賦予它們的表達式的值的真假性(truthy)，來顯示和隱藏它們所屬的那一部分DOM。

我們在這里不會深入，但你應該熟悉JavaScript中變量值的“truthy”和“falsy”概念。

<button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow">Flip the shouldShow variable</button>
 <div ng-show="shouldShow">
  <h3>Showing {{ shouldShow }}</h3>
 </div> <div ng-hide="shouldShow">
  <h3>Hiding {{ shouldShow }}</h3>
 </div>

ng-repeat

ng-repeat指令遍歷一個數(shù)據(jù)集合中的每個數(shù)據(jù)元素，加載HTML模版把數(shù)據(jù)渲染出來。被重復使用的模版元素，就是我們綁定了這個指令屬性的DOM元素。每一個使用模版渲染的DOM元素都有自己的scope。

在更多的解釋之前，我們先看一個例子。假設我們的controller里有這樣一個數(shù)據(jù)元素的數(shù)組：

$scope.roommates = [
  { name: 'Ari'},
  { name: 'Q'},
  { name: 'Sean'},
  { name: 'Anand'}
 ];

在view里我們可以用ng-repeat來遍歷這個集合里的數(shù)據(jù)：

<ul>
  <li ng-repeat="person in roommates">{{ person.name }}</li> </ul>

對賦予ng-repeat的表達式稍作改動，我們還可以用它遍歷一個由成對的key-value數(shù)據(jù)組成的集合。例如，假設我們有一個人名和他們最喜歡的顏色的數(shù)據(jù)集合：

$scope.people = {
  'Ari': 'orange',
  'Q': 'purple',
  'Sean': 'green'
 }

要遍歷它，我們可以給ng-repeat指令屬性賦予這個表達式: (key, value) in object:

<ul>
  <li ng-repeat="(name, color) in people">{{ name }}'s favorite color is {{ color }}
  </li>
 </ul>

最新評論