javascript
七步从AngularJS菜鸟到专家（4和5）：指令和表达式
這一篇包含了＂AngularJS?-?七步從菜鳥到專家＂系列的第四篇（指令）和第五篇（表達(dá)式）。
之前的幾篇展示了我們應(yīng)用的核心組件，以及如何設(shè)置搭建一個(gè)Angular.js應(yīng)用。在這一部分，我們會(huì)厘清一些術(shù)語(yǔ)，然后深入探討很多Angular.js提供的核心功能。
通 過(guò)這整個(gè)系列的教程，我們會(huì)開(kāi)發(fā)一個(gè)NPR（美國(guó)全國(guó)公共廣播電臺(tái)）廣播的音頻播放器，它能顯示Morning?Edition節(jié)目里現(xiàn)在播出的最新故 事，并在我們的瀏覽器里播放它們。完成版的Demo可以看這里（http://www.ng-newsletter.com/code /beginner_series/）
第四部分?指令屬性
目前為止，我們已提到過(guò)幾次“指令屬性”的概念，但從未深入探討過(guò)它到底是什么。實(shí)際上，“指令屬性”就是綁定在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)于指令屬性的專題文章里（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
試試看?
ng-model指令屬性（我們?cè)谥暗恼鹿?jié)使用過(guò)它），被用來(lái)將DOM文本輸入框的值，跟controller里的$scope?model綁定起來(lái)。具體的實(shí)現(xiàn)過(guò)程，是在這個(gè)值上綁定了一個(gè)$watch函數(shù)（類似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á)式？
第五部分?表達(dá)式
要想理解指令屬性的運(yùn)作，我們必須先理解表達(dá)式，所以這里我們就繞個(gè)路，看看本系列的第五部分——表達(dá)式。在之前的例子里我們已經(jīng)見(jiàn)過(guò)表達(dá)式，例如?{{?person.name?}}?和?{{?clock?}}。
最后的例子里?(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)致類型錯(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è)定初始變量的值：
試試看?
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。
試試看
我們也可以用ng-click?來(lái)調(diào)用在controller里寫好并綁定在$scope上的函數(shù)，例如：
controller?里的函數(shù):
試試看
ng-show?/?ng-hide
The?ng-show?and?ng-hide?directives?show?or?hide?a?portion?of?the?DOM?depending?on?whether?the?expression?is?truthy.
ng-show和ng-hide指令，根據(jù)賦予它們的表達(dá)式的值的真假性(truthy)，來(lái)顯示和隱藏它們所屬的那一部分DOM。
我們?cè)谶@里不會(huì)深入，但你應(yīng)該熟悉JavaScript中變量值的“truthy”和“falsy”概念。
試試看
圖6
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ù)組：
在view里我們可以用ng-repeat來(lái)遍歷這個(gè)集合里的數(shù)據(jù)：
請(qǐng)看
- Ari
- Q
- Sean
- Anand
對(duì)賦予ng-repeat的表達(dá)式稍作改動(dòng)，我們還可以用它遍歷一個(gè)由成對(duì)的key-value數(shù)據(jù)組成的集合。例如，假設(shè)我們有一個(gè)人名和他們最喜歡的顏色的數(shù)據(jù)集合：
要遍歷它，我們可以給ng-repeat指令屬性賦予這個(gè)表達(dá)式：(key,?value)?in?object：
請(qǐng)看
- Ari’s?favorite?color?is?orange
- Q’s?favorite?color?is?blue
- Sean’s?favorite?color?is?green
Angular.js提供的直接可用的指令屬性并不多，但它讓我們可以很容易地創(chuàng)建自己的指令屬性。請(qǐng)到這里查看我們的指令屬性創(chuàng)建指南：http://www.ng-newsletter.com/posts/directives.html
我們應(yīng)用中的指令屬性
在上一篇中，我們的收音機(jī)應(yīng)用只從NPR?API取回了最新的音頻節(jié)目列表：
現(xiàn)在我們學(xué)了遍歷一個(gè)list的實(shí)現(xiàn)方法，可以在我們的收音機(jī)應(yīng)用里，像剛才那樣用ng-repeat來(lái)遍歷這個(gè)節(jié)目列表了：
NPR?API給我們的是一個(gè)有title+$text的列表，這個(gè)結(jié)構(gòu)是NPR?API所特有的，而不是Angular.js的。
現(xiàn)在我們列出了節(jié)目和它們的標(biāo)題，但還不能點(diǎn)擊并播放它們。用ng-click我們可以給HTML元素加上一個(gè)點(diǎn)擊功能：
通過(guò)這一步，我們把一個(gè)play動(dòng)作函數(shù)綁定到了列表里的<li>DOM元素上。現(xiàn)在，我們?cè)赑layerController里創(chuàng)建這個(gè)play動(dòng)作函數(shù)，然后我們就有了一個(gè)功能完備的音頻應(yīng)用：
現(xiàn)在這個(gè)應(yīng)用功能完備了，但是還不太好看。而且隨著我們繼續(xù)添加新功能，代碼也會(huì)膨脹，變得難以管理。我們可以創(chuàng)建自己的指令屬性，來(lái)幫助我們減少?gòu)?fù)雜性。
想更多地學(xué)習(xí)自定義指令屬性，可以看看我們深入探討指令屬性的文章：http://www.ng-newsletter.com/posts/directives.html
創(chuàng)建自定義指令屬性，我們使用app對(duì)象的directive方法：
我們不會(huì)逐個(gè)解釋每個(gè)選項(xiàng)的意義，因?yàn)槲覀冇幸黄獙ｉT的深入文章來(lái)介紹它們（http://www.ng-newsletter.com /posts/directives.html）。這里我們只需要明白，現(xiàn)在我們就能在HTML里使用這個(gè)自定義的指令屬性了，它會(huì)將它所在的DOM元素 替換為我們給定的templateUrl所指向的模版里的內(nèi)容（在?/views/nprListItem?中）。
現(xiàn)在，我們的主HTML文件可以保持整潔，而將用來(lái)渲染列表內(nèi)容的view，創(chuàng)建在這個(gè)單獨(dú)提取出來(lái)的模版文件里：
注意我們?cè)谀０嫖募镉胣gModel來(lái)指向之前的program數(shù)據(jù)，因?yàn)樵趧?chuàng)建自定義指令屬性時(shí)，我們做了設(shè)置。
現(xiàn)在，我們?cè)谥鱄TML文件里就不用再寫上面那么多HTML，而只要簡(jiǎn)單地?fù)Q上我們的自定義指令屬性npr-link：
在下一章中，我們會(huì)介紹Service的用法，以及如何在我們應(yīng)用的多個(gè)controller之間通訊。
本系列的官方代碼庫(kù)可從github上下載：
https://github.com/auser/ng-newsletter-beginner-series.
要將這個(gè)代碼庫(kù)保存到本地，請(qǐng)先確保安裝了git，clone此代碼庫(kù)，然后check?out其中的part5分支。我們使用XHR獲取模版，所以你需要在本地服務(wù)器上運(yùn)行這一章的代碼。在part5分支里我們提供了服務(wù)器端代碼：
總結(jié)
以上是生活随笔為你收集整理的七步从AngularJS菜鸟到专家（4和5）：指令和表达式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java 目录的遍历与删除
- 下一篇： 【JEECG技术博文】JEECG图表配置