AngularJS幾個經常使用指令

 

認識了AngularJS框架，咱們開始建立第一個AngularJS應用。

AngularJS是以一個JavaScript文件形式發佈的，可經過script標籤載入AngularJS腳本，以下所示：

<script src="angular.min.js"></script>

在編輯中，輸入以下代碼

<div ng-app="" ng-init="name='World'">

Hello {{ name }}

</div>

點擊運行結果查看是否爲「Hello World」，如正確則表示AngularJS腳本成功引入。

指令介紹

---

AngularJS有一套完整的、可擴展的、用來幫助web應用開發的指令集，它使得HTML能夠轉變成「特定領域語言(DSL)」，是用來擴展瀏覽器能力的技術之一，在DOM編譯期間，和HTML關聯着的指令會被檢測到，而且被執行，這使得指令能夠爲DOM指定行爲，或者改變它。

AngularJS經過稱爲指令的新屬性來擴展的HTML，帶有前綴ng-，咱們也能夠稱之爲「指令屬性」，它就是綁定在DOM元素上的函數，能夠調用方法、定義行爲、綁定controller及$scope對象、操做DOM，等等。

 

AngularJS指令指示的是「當關聯的HTML結構進入編譯階段時應該執行的操做」，它本質上只是一個當編譯器編譯到相關DOM時須要執行的函數，能夠寫在元素的名稱裏，屬性裏，css類名裏，註釋裏。

當瀏覽器啓動、開始解析HTML時，DOM元素上的指令屬性就會跟其餘屬性同樣被解析，也就是說當一個Angular.js應用啓動，Angular編譯器就會遍歷DOM樹來解析HTML，尋找這些指令屬性函數，在一個DOM元素上找到一個或多個這樣的指令屬性函數，它們就會被收集起來、排序，而後按照優先級順序被執行。

Angular.js應用的動態性和響應能力，都要歸功於指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

關於「指令屬性」就先暫時介紹這些，相信你已經對它有初步的瞭解，接下來咱們就開始逐一的深刻的學習它們。

指令：ng-app

---

ng-app指令來標明一個AngularJS應用程序，並經過AngularJS完成自動初始化應用和標記應用根做用域，同時載入和指令內容相關的模塊，並經過擁有ng-app指令的標籤爲根節點開始編譯其中的DOM。

引用方法很簡單，以下所示：

1. <div ng-app="">
2.  
3. </div>

如上引用，一個AngularJS應用程序初始化就完成了並標記了做用域，也就是div元素就是AngularJS應用程序的"全部者"，在它裏面的指令也就會被Angular編譯器所編譯、解析了。

指令：ng-init

---

ng-init指令初始化應用程序數據，也就是爲AngularJS應用程序定義初始值，一般狀況下，咱們會使用一個控制器或模塊來代替它，後面咱們會介紹有關控制器和模塊的知識。

以下所示，咱們爲應用程序變量name賦定初始值。

1. <div ng-app="" ng-init="name='Hello World'">
2.  
3. </div>

咱們不只能夠賦值字符串，也能夠賦值爲數字、數組、對象，並且能夠爲多個變量賦初始值，以下所示：

1. <div ng-app="" ng-init="quantity=1;price=5">
2.  
3. </div>
4. //或者
5. <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
6.  
7. </div>

後面咱們還會學習使用控制器來初始化數據的方式，接着咱們來學習如何來調用這些已經初始化了的值。

AngularJS表達式

---

AngularJS框架的核心功能之一 —— 數據綁定，由兩個花括號{{}}組成，能夠把數據綁定到HTML，相似Javascript代碼片斷，能夠包含文字、運算符和變量，一般在綁定數據中用到，表達式能夠綁定數字、字符串、對象、數組，寫在雙大括號內：{{ expression }}。

1. 如前面的示例，咱們就可使用表達式這樣調用初始化的變量值，以下。

1. <div ng-app="" ng-init="name='Hello World'">
2. {{ name }}
3. </div>

1. 固然咱們也可使用表達式輸出數字、數組等等，以下所示：

2.1. 輸出數字，以下示例：

1. <div ng-app="" ng-init="quantity=12;price=5">
2.  
3. 總價： {{ quantity * price }}
4.  
5. </div>

2.2. 輸出對象，以下示例：

1. <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
2.  
3. 名字爲： {{ names[0] }}
4.  
5. </div>

後面咱們還會學習另外一種數據綁定的方式 —— 經過指令ng-bind來實現，繼續加油吧！

指令：ng-model

---

在AngularJS中，只須要使用ng-model指令就能夠把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。

以下示例，使用ng-model指令對數據進行綁定。

1. <div ng-app="">
2.  
3. 請輸入任意值：<input type="text" ng-model="name">
4.  
5. 你輸入的爲： {{ name }}
6.  
7. </div>

ng-model把相關處理事件綁定到指定標籤上，這樣咱們就能夠不用在手工處理相關事件(好比change等)的條件下完成對數據的展示需求。

以上介紹了ng-model的單向綁定(view->model)後面控制器咱們會用到它的雙向綁定功能，好，參照以上代碼，趕快試試數據綁定的效果吧！

指令：ng-bind

---

指令ng-bind和AngularJS表達式{{}}有殊途同歸之妙，但不一樣之處就在於ng-bind是在angular解析渲染完畢後纔將數據顯示出來的。

以下使用ng-bind指令綁定把應用程序數據。

1. <div ng-app="">
2. 請輸入一個名字：<input type="text" ng-model="name">
3. Hello <span ng-bind="name"></span>
4. </div>

PS：使用花括號語法時，由於瀏覽器須要首先加載頁面，渲染它，而後AngularJS才能把它解析成你指望看到的內容，因此對於首個頁面中的數據綁定操做，建議採用ng-bind，以免其未被渲染的模板被用戶看到。

指令：ng-click

---

AngularJS也有本身的HTML事件指令,好比說經過ng-click定義一個AngularJS單擊事件。

對按鈕、連接等，咱們均可以用ng-click指令屬性來實現綁定，以下簡單示例：

1. <div ng-app="" ng-init="click=false">
2. <button ng-click="click= !click">隱藏/顯示</button>
3. <div ng-hide="click">
4. 請輸入一個名字：<input type="text" ng-model="name">
5. Hello <span ng-bind="name"></span>
6. </div>
7. </div>

PS：ng-hide="true"，設置HTML元素不可見。

ng-click指令將DOM元素的鼠標點擊事件(即mousedown)綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，Angular就會調用相應的方法，是否是很簡單方便呢！

 

原文地址：匯智網