AngularJS 指令
AngularJS通過被稱為指令的新屬性來擴展HTML。
AngularJS 通過內置的指令來為應用添加功能。
AngularJS 允許你自定義指令。
AngularJS 指令
AngularJS指令是擴展的HTML屬性，帶有前綴ng- 。
ng-app指令初始化一個AngularJS應用程序。
ng-init指令初始化應用程序數據。
ng-model指令把元素值（比如輸入域的值）綁定到應用程序。
完整的指令內容可以參閱AngularJS參考手冊 。
AngularJS 實例
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>
嘗試一下»
ng-app指令告訴AngularJS，<div>元素是AngularJS 應用程序的"所有者"。
 | 一個網頁可以包含多個運行在不同元素中的AngularJS 應用程序。 |
|---|
數據綁定
上面實例中的{{ firstName }}表達式是一個AngularJS數據綁定表達式。
AngularJS 中的數據綁定，同步了AngularJS 表達式與AngularJS 數據。
{{ firstName }}是通過ng-model="firstName"進行同步。
在下一個實例中，兩個文本域是通過兩個ng-model 指令同步的：
AngularJS 實例
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
嘗試一下»
| 使用ng-init不是很常見。 您將在控制器一章中學習到一個更好的初始化數據的方式。 |
|---|
重複HTML 元素
ng-repeat指令會重複一個HTML元素：
AngularJS 實例
<p>使用ng-repeat 來循環數組</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
嘗試一下»
ng-repeat指令用在一個對像數組上：
AngularJS 實例
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
嘗試一下»
| AngularJS 完美支持數據庫的CRUD（增加Create、讀取Read、更新Update、刪除Delete）應用程序。 把實例中的對像想象成數據庫中的記錄。 |
|---|
ng-app 指令
ng-app指令定義了AngularJS應用程序的根元素 。
ng-app指令在網頁加載完畢時會自動引導 （自動初始化）應用程序。
稍後您將學習到ng-app如何通過一個值（比如ng-app="myModule"）連接到代碼模塊。
ng-init 指令
ng-init指令為AngularJS應用程序定義了初始值 。
通常情況下，不使用ng-init。 您將使用一個控制器或模塊來代替它。
稍後您將學習更多有關控制器和模塊的知識。
ng-model 指令
ng-model指令綁定HTML元素到應用程序數據。
ng-model指令也可以：
- 為應用程序數據提供類型驗證（number、email、required）。
- 為應用程序數據提供狀態（invalid、dirty、touched、error）。
- 為HTML 元素提供CSS 類。
- 綁定HTML 元素到HTML 表單。
ng-repeat 指令
ng-repeat指令對於集合中（數組中）的每個項會克隆一次HTML元素 。
創建自定義的指令
除了AngularJS 內置的指令外，我們還可以創建自定義指令。
你可以使用.directive函數來添加自定義的指令。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來命名一個指令，w3bigDirective ,但在使用它時需要以-分割, w3big-directive:
AngularJS 實例
< w3big-directive > < /w3big-directive >
< script >
var app = angular.module("myApp", []);
app.directive("w3bigDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
< /script >
< /body >
嘗試一下»
你可以通過以下方式來調用指令：
- 元素名
- 屬性
- 類名
- 註釋
以下實例方式也能輸出同樣結果:
限制使用
你可以限制你的指令只能通過特定的方式來調用。
實例
通過添加restrict屬性,並設置只值為"A" ,來設置指令只能通過屬性的方式來調用:
app.directive( "w3bigDirective" , function () {
return {
restrict : "A" ,
template : "<h1>自定義指令!</h1>"
};
});
嘗試一下»
restrict值可以是以下幾種:
-
E作為元素名使用 -
A作為屬性使用 -
C作為類名使用 -
M作為註釋使用
restrict默認值為EA ,即可以通過元素名和屬性名來調用指令。