指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令，以及介紹如何在實(shí)際項(xiàng)目中使用。

AngularJS通過指令將HTML屬性進(jìn)行了擴(kuò)展。

AngularJS指令
　　AngularJS指令是帶有ng-前綴的擴(kuò)展HTML屬性。

　　ng-app指令用來初始化AngularJS application。

　　ng-init指令用來初始化application數(shù)據(jù)。

　　ng-model指令用來將HTML控件（如input，select，textarea等）的值綁定到application數(shù)據(jù)。

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

　　ng-app指令同時(shí)也告訴AngularJS，它所在的<div>元素是AngularJS application的根元素，即作用域。

數(shù)據(jù)綁定

　　在上面的示例中，{{ firstName }}是一個(gè)AngularJS數(shù)據(jù)綁定表達(dá)式。

　　在AngularJS數(shù)據(jù)綁定中，AngularJS表達(dá)式使用AngularJS數(shù)據(jù)進(jìn)行同步更新。

　　{{ firstName }}通過ng-model="firstName"同步更新數(shù)據(jù)。

<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>

Note 使用ng-init指令在AngularJS開發(fā)中非常普遍。在控制器一節(jié)中你將會(huì)看到更好的初始化數(shù)據(jù)的方法。
重復(fù)HTML元素
　　ng-repeat指令用來重復(fù)創(chuàng)建一個(gè)HTML元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

　　在對(duì)象數(shù)組上使用ng-repeat指令：

<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>

Note AngularJS非常適合數(shù)據(jù)庫CRUD（即創(chuàng)建，讀取，更新和刪除）操作。想象一下，如果這些對(duì)象來自于數(shù)據(jù)庫呢？

ng-app指令

　　ng-app指令定義了AngularJS application的根元素。

　　當(dāng)Web頁面加載完成后，ng-app指令將auto-bootstrap（自動(dòng)初始化）application。即自動(dòng)初始化并引導(dǎo)AngularJS application執(zhí)行。

　　在后面的章節(jié)中你將會(huì)學(xué)習(xí)到如何給ng-app指令指定一個(gè)值（例如ng-app="myModule"），從而與模塊聯(lián)系起來。

ng-init指令
　　ng-init指令用于為AngularJS application初始化值。

　　一般情況下不需要使用ng-init指令，而是使用控制器或者模塊來進(jìn)行初始化工作。

　　在后面的章節(jié)中你將會(huì)學(xué)習(xí)到有關(guān)控制器和模塊的相關(guān)內(nèi)容。

ng-model指令
　　ng-model指令用來將HTML控件（如input，select，textarea等）的值綁定到application數(shù)據(jù)。

　　ng-model指令還可以用來：

提供數(shù)據(jù)驗(yàn)證（如驗(yàn)證數(shù)字，email地址，必填項(xiàng)）。
提供數(shù)據(jù)的狀態(tài)（如invalid，dirty，touched，error）。
為HTML元素提供CSS樣式類。
將HTML元素綁定到HTML表單。

ng-repeat指令