AngularJS 指令ng-app 指令ng-init 指令ng-model 指令ng-repeat 指令自定義的指令

angularjs 通過被稱為 指令 的新屬性來擴充 html。并且通過内置的指令來為應用添加功能。另外，angularjs 允許我們自定義指令。

angularjs為我們提供了很多指令，在前面我們也見到了一些，如：<code>ng-app</code>、’ng-bind’等。angularjs提供的指令我們可以查閱官網的文檔，這裡就不一一列舉了，下面介紹幾個比較常用的指令的用法，其他指令的使用也大同小異。

angularjs 指令是擴充的 html 屬性，帶有字首 ng-。

在之前的代碼中，我們可以發現每一個angularjs的代碼裡都含有<code>ng-app</code>指令。<code>ng-app</code> 指令定義了 angularjs 應用程式的 根元素。在網頁加載完畢時會自動引導（自動初始化）應用程式。

<code>ng-init</code> 指令為 angularjs 應用程式定義了 初始值。通常情況下，我們不使用 <code>ng-init</code>。我們将使用一個控制器或子產品來代替它。

這是之前的一個示例，使用<code>ng-init</code>指令初始化了一個名為color的數組。

<code>ng-model</code> 指令 綁定 html 元素 到應用程式資料。另外<code>ng-model</code> 指令也可以：

為應用程式資料提供類型驗證（number、email、required）。

為應用程式資料提供狀态（invalid、dirty、touched、error）。

為 html 元素提供 css 類。

綁定 html 元素到 html 表單。

<code>ng-repeat</code> 指令對于集合中（數組中）的每個項會 克隆一次 html 元素。

除了 angularjs 内置的指令外，我們還可以建立自定義指令。

我們可以使用 .directive 函數來添加自定義的指令。要調用自定義指令，html 元素上需要添加自定義指令名。我們需要使用駝峰法來命名一個指令， 例如：<code>mydirective</code>, 但在使用它時需要以 <code>-</code> 分割, <code>my-directive</code>。

我們可以通過元素名、屬性、類名、注釋來調用指令。

我們可以限制我們的指令隻能通過特定的方式來調用。通過添加 <code>restrict</code> 屬性來限制,例如：設定<code>restrict</code>值為 “a”, 則指令隻能通過屬性的方式來調用。

<code>restrict</code> 值可以是以下幾種:

e 隻限元素名使用

a 隻限屬性使用

c 隻限類名使用

m 隻限注釋使用

<code>restrict</code> 預設值為 ea, 即可以通過元素名和屬性名來調用指令。