走進AngularJs(二) ng模板中經常使用指令的使用方式

 

 

　經過使用模板，咱們能夠把model和controller中的數據組裝起來呈現給瀏覽器，還能夠經過數據綁定，實時更新視圖，讓咱們的頁面變成動態的。ng的模板真是讓我愛不釋手。學習ng道路還很漫長，從模板開始入手是個不錯方式，由於這部份內容相對簡單好理解，並且是視圖層的東西，你們都喜歡能夠立馬看得見的東西嘛。本篇我將蒐羅模板中的經常使用指令一一測試，瞭解其使用方法，有點像背單詞的感受，會比較枯燥。不過對於初學，這樣的枯燥是必需要經歷的，開始~

1、模板中可以使用的東西及表達式

　　模板中可使用的東西包括如下四種：

1. 指令(directive)。ng提供的或者自定義的標籤和屬性，用來加強HTML表現力。
2. 標記(markup)。即雙大括號{{}}，可將數據單向綁定到HTML中。
3. 過濾器(filter)。用來格式化輸出數據。
4. 表單控制。用來加強表單的驗證功能。

　　其中，指令無疑是使用量最大的，ng內置了不少指令用來控制模板，如ng-repeat，ng-class，也有不少指令來幫你完成業務邏輯，如ng-controller,ng-model。過濾器一般是伴隨標記來使用的，將你model中的數據格式化爲須要的格式。表單的控制功能主要涉及到數據驗證以及表單控件的加強。

　　在這裏有必要說明一下表達式的概念，畢竟咱們模板中大部分使用的都是變量。ng中的表達式與javascript表達式相似可是不能夠劃等號，它是ng本身定義的一套模式。表達式能夠做爲指令的值，如ng-modle=」people.name」、ng-click=」showMe()」，看起來是如此像字符串，故而也叫字符串表達式。也能夠在標記中使用表達式，如{{1+2}}，或者與過濾器一塊兒使用{{1+2 | currency}}。在框架內部，字符串不會簡單的使用eval()來執行，而是有一個專門的$parse服務來處理。在ng表達式中不可使用循環語句、判斷語句，事實上在模板中使用複雜的表達式也是一個不推薦的作法，這樣視圖與邏輯就混雜在一塊兒了。

2、樣式相關的指令

　　既然模板就是普通的HTML，那我首要關心的就是樣式的控制，元素的定位、字體、背景色等等如何能夠靈活控制。下面來看看經常使用的樣式控制指令。

　　1. ng-class

　　ng-class用來給元素綁定類名，其表達式的返回值能夠是如下三種：

　　1) 類名字符串，能夠用空格分割多個類名，如’redtext boldtext’；

　　2) 類名數組，數組中的每一項都會層疊起來生效；

　　3) 一個名值對應的map，其鍵值爲類名，值爲boolean類型，當值爲true時，該類會被加在元素上。

　　下面來看一個使用map的例子：

ng-class測試

紅色  加粗  刪除線

map:{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}

 

　　若是你想拼接一個類名出來，可使用插值表達式，如：

　　<div class=」{{style}}text」>字體樣式測試</div>

　　而後在controller中指定style的值：

　　$scope.style = ‘red’;

　　注意我用了class而不是ng-class，這是不能夠對換的，官方的文檔也未作說明，姑且認爲這是ng的語法規則吧。

　　與ng-class相近的，ng還提供了ng-class-odd、ng-class-even兩個指令，用來配合ng-repeat分別在奇數列和偶數列使用對應的類。這個用來在表格中實現隔行換色再方便不過了。

　　2. ng-style

　　ng-style用來綁定元素的css樣式，其表達式的返回值爲一個js對象，鍵爲css樣式名，值爲該樣式對應的合法取值。用法比較簡單：

<div ng-style="{color:'red'}">ng-style測試</div>

<div ng-style="style">ng-style測試</div>

$scope.style = {color:'red'};

　　3. ng-show，ng-hide

　　　對於比較經常使用的元素顯隱控制，ng也作了封裝，ng-show和ng-hide的值爲boolean類型的表達式，當值爲true時，對應的show或hide生效。框架會用display:block和display:none來控制元素的顯隱。

3、表單控件功能相關的

　　對於經常使用的表單控件功能，ng也作了封裝，方便靈活控制。

　　ng-checked控制radio和checkbox的選中狀態

　　ng-selected控制下拉框的選中狀態

　　ng-disabled控制失效狀態

　　ng-multiple控制多選

　　ng-readonly控制只讀狀態

　　以上指令的取值均爲boolean類型，當值爲true時相關狀態生效，道理比較簡單就很少作解釋。注意： 上面的這些只是單向綁定，即只是從數據到模板，不能副作用於數據。要雙向綁定，仍是要使用 ng-model 。

4、事件綁定相關

　　事件綁定是javascrpt中比較重要的一部份內容，ng對此也作了詳細的封裝，正如咱們以前使用過的ng-click同樣，其餘事件的指令以下：

　　ng-change

　　ng-dblclick

　　ng-mousedown

　　ng-mouseenter

　　ng-mouseleave

　　ng-mousemove

　　ng-mouseover

　　ng-mouseup

　　ng-submit

　　事件綁定指令的取值爲函數，而且須要加上括號，例如：

<select ng-change=」change($event)」></select>

　　而後在controller中定義以下：

$scope.change = function($event){
         alert($event.target);
         //……………………
}

　　在模板中能夠用變量$event將事件對象傳遞到controller中。

　　對於ng的這種設計，一些人有所質疑，視圖與事件綁定混在一塊兒到底好很差？咱們不是要講究視圖與邏輯分離嗎？如此一來，把事件的綁定又變回了內聯的，豈不是歷史的倒退。我也同樣對此表示不解，由於不寫onclick已經不少年。。。但既然已經存在了，咱們不妨往合理的方向上想想，或許ng的設計者壓根就不想讓模板成爲單純的視圖層，原本就是想加強HTML，讓它有一點業務能力。這麼想的話彷佛也能想通，好吧，先欺騙一下本身吧~

5、特殊的ng-src和ng-href

　　在說明這兩個指令的特殊以前，須要先了解一下ng的啓動及執行過程，以下圖：

　　1) 瀏覽器加載靜態HTML文件並解析爲DOM；

　　2) 瀏覽器加載angular.js文件；

　　3) angular監聽DOMContentLoaded 事件，監聽到時開始啓動；

　　4) angular尋找ng-app指令，肯定做用範圍；

　　5) 找到app中定義的Module使用$injector服務進行依賴注入；

　　6) 根據$injector服務建立$compile服務用於編譯；

　　7) $compile服務編譯DOM中的指令、過濾器等；

　　8) 使用ng-init指令，將做用域中的變量進行替換；

　　9) 最後生成了咱們在最終視圖。

　　能夠看到，ng框架是在DOMcontent加載完畢後纔開始發揮做用。假如咱們模板中有一張圖片以下：

　　<img src=」{{imgUrl}}」 />

　　那麼在頁面開始加載到ng編譯完成以前，頁面上會一直顯示一張錯誤的圖片，由於路徑{{imgUrl}}還未被替換，就像這樣：

　　爲了不這種狀況，咱們使用ng-src指令，這樣在路徑被正確獲得以前就不會顯示找不到圖片。同理，<a>標籤的href屬性也須要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的連接。

　　順着這個思路再多想一點，咱們在模板中使用{{}}顯示數據時，在ng編譯完成以前頁面上豈不是會顯示出大括號及裏面的表達式？確實是這樣。爲了不這個，ng中有一個與{{}}等同的指令:ng-bind，一樣用於單向綁定，在頁面剛加載的時候就不會顯示出對用戶無用的數據了。儘管這樣你可能不但沒舒心反而更糾結了，{{}}那麼好用易理解，還不能用了不成？好消息是咱們依然可使用。由於我編寫的是單頁面應用，頁面只會在加載index.html的時候出這個問題，只需在index.html中的模板中換成ng-bind就行。其餘的模板是咱們動態加載的，就能夠放心使用{{}}了。

6、總結一下

         枯燥的內容終於寫完！~在寫這篇文章以前我就在糾結，寫這樣的內容是否是有點多餘，由於這些東西在angular官網(http://docs.angularjs.org/api/)一看就明白，並且在線示例也寫的很棒。本着不急於求成的原則我仍是決定先把這些東西都試一試吧，因此就有詳有略的介紹了以上內容，必要的時候也能夠當一個備忘。

轉載