指令
AngularJS 指令
AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化 AngularJS 應(yīng)用程序。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令將 HTML 控件（input, select, textarea）的值綁定到應(yīng)用程序數(shù)據(jù)。
請(qǐng)?jiān)谖覀兊?AngularJS 指令參考中閱讀有關(guān)所有 AngularJS 指令的信息。
實(shí)例
<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
ng-app 指令還告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序的“所有者”。
數(shù)據(jù)綁定
上例中的 {{ firstName }} 表達(dá)式是一個(gè) AngularJS 數(shù)據(jù)綁定表達(dá)式。
AngularJS 中的數(shù)據(jù)綁定將 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)進(jìn)行綁定。
{{ firstName }} 與 ng-model="firstName" 綁定在一起。
在下一個(gè)例子中，兩個(gè)文本字段通過兩個(gè) ng-model 指令綁定在一起：
實(shí)例
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
使用 ng-init 并不常見。你將在關(guān)于控制器的章節(jié)中學(xué)習(xí)如何初始化數(shù)據(jù)。
重復(fù) HTML 元素
ng-repeat 指令重復(fù) HTML 元素：
實(shí)例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
ng-repeat 指令實(shí)際上為集合中的每個(gè)項(xiàng)目克隆一次 HTML 元素。
用于對(duì)象數(shù)組的 ng-repeat 指令：
實(shí)例
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
AngularJS 非常適合數(shù)據(jù)庫 CRUD（創(chuàng)建、讀取、更新、刪除）應(yīng)用程序。
想象一下，如果這些對(duì)象是來自數(shù)據(jù)庫的記錄。
ng-app 指令
ng-app 指令定義 AngularJS 應(yīng)用程序的根元素。
當(dāng)加載網(wǎng)頁時(shí)，ng-app 指令將自動(dòng)引導(dǎo)（自動(dòng)初始化）應(yīng)用程序。
ng-init 指令
ng-init 指令定義 AngularJS 應(yīng)用程序的初始值。
通常，您不會(huì)使用 ng-init。您將改用控制器或模塊。
稍后您將了解有關(guān)控制器和模塊的更多信息。
ng-model 指令
ng-model 指令將 HTML 控件（input, select, textarea）的值綁定到應(yīng)用程序數(shù)據(jù)。
ng-model 指令還可以：
- 為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證（數(shù)字、電子郵件、必填項(xiàng)）
- 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（無效、臟、已觸碰、錯(cuò)誤）
- 為 HTML 元素提供 CSS 類
- 將 HTML 元素綁定到 HTML 表單
在下一章中閱讀更多關(guān)于 ng-model 指令的信息。
創(chuàng)建新指令
除了所有內(nèi)置的 AngularJS 指令之外，您還可以創(chuàng)建自己的指令。
新指令是通過使用 .directive 函數(shù)創(chuàng)建的。
要調(diào)用新指令，請(qǐng)創(chuàng)建一個(gè)與新指令具有相同標(biāo)記名稱的 HTML 元素。
命名指令時(shí)，必須使用駝峰式命名，w3TestDirective，但調(diào)用它時(shí)，必須使用 - 分隔的名稱，w3-test-directive：
實(shí)例
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
您可以使用以下方式調(diào)用指令：
- 元素名
- 屬性
- 類
- 注釋
下面的例子都將產(chǎn)生相同的結(jié)果：
元素名
<w3-test-directive></w3-test-directive>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
屬性
<div w3-test-directive></div>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
類
<div class="w3-test-directive"></div>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
注釋
<!-- directive: w3-test-directive -->運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
限制
你可以限制你的指令只能通過某些方法來調(diào)用。
實(shí)例
通過添加一個(gè)值為 "A" 的 restrict 屬性，該指令只能通過屬性來調(diào)用：
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
合法的 restrict 值為：
E表示元素名A表示屬性C表示類M表示注釋
默認(rèn)情況下，該值為 EA，這意味著元素名稱和屬性名稱都可以調(diào)用指令。