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

當(dāng)瀏覽器啟動(dòng)、開(kāi)始解析HTML（像平時(shí)一樣）時(shí)，DOM元素上的指令屬性就會(huì)跟其他屬性一樣被解析。

當(dāng)一個(gè)Angular.js應(yīng)用啟動(dòng)，Angular編譯器就會(huì)遍歷DOM樹(shù)（從有ng-app指令屬性的那個(gè)DOM元素開(kāi)始，如我們?cè)诒鞠盗械谝黄锼徇^(guò)的），解析HTML，尋找這些指令屬性函數(shù)。

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

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

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

ng-model

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

試試看

ng-model指令屬性（我們?cè)谥暗恼鹿?jié)使用過(guò)它），被用來(lái)將DOM文本輸入框的值，跟controller里的$scope model綁定起來(lái)。具體的實(shí)現(xiàn)過(guò)程，是在這個(gè)值上綁定了一個(gè)$watch函數(shù)（類(lèi)似JavaScript里的事件監(jiān)聽(tīng)函數(shù)）。

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

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

幾個(gè)常見(jiàn)的指令屬性：

{{ 表達(dá)式 }}

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

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

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

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

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

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

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

表達(dá)式都運(yùn)行在調(diào)用它們的scope里，所以一個(gè)表達(dá)式可訪問(wèn)并操作其scope上的一切。由此，你可以使用表達(dá)式遍歷其scope的屬性（我們?cè)趎g-repeat中會(huì)看到這一應(yīng)用）、調(diào)用scope里的函數(shù)，或者對(duì)scope中的變量進(jìn)行數(shù)學(xué)運(yùn)算。

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

ng-init

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

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

試試看

Hello, Ari Lerner

ng-click

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

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

試試看

我們也可以用ng-click 來(lái)調(diào)用在controller里寫(xiě)好并綁定在$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ù)賦予它們的表達(dá)式的值的真假性(truthy)，來(lái)顯示和隱藏它們所屬的那一部分DOM。

我們?cè)谶@里不會(huì)深入，但你應(yīng)該熟悉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指令遍歷一個(gè)數(shù)據(jù)集合中的每個(gè)數(shù)據(jù)元素，加載HTML模版把數(shù)據(jù)渲染出來(lái)。被重復(fù)使用的模版元素，就是我們綁定了這個(gè)指令屬性的DOM元素。每一個(gè)使用模版渲染的DOM元素都有自己的scope。

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

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

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

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

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

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

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

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

最新評(píng)論