指令（Directives）是所有AngularJS應用最重要的部分。盡管AngularJS已經提供了非常豐富的指令，但還是經常需要創建應用特定的指令。這篇教程會為你講述如何自定義指令，以及介紹如何在實際項目中使用。在這篇文章的最后（第二部分），我會指導你如何使用Angular指令來創建一個簡單的記事本應用。

概述

一個指令用來引入新的HTML語法。指令是DOM元素上的標記，使元素擁有特定的行為。舉例來說，靜態的HTML不知道如何來創建和展現一個日期選擇器控件。讓HTML能識別這個語法，我們需要使用指令。指令通過某種方法來創建一個能夠支持日期選擇的元素。我們會循序漸進地介紹這是如何實現的。 如果你寫過AngularJS的應用，那么你一定已經使用過指令，不管你有沒有意識到。你肯定已經用過簡單的指令，比如 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行為。例如，ng-repeat 重復特定的元素，ng-show 有條件地顯示一個元素。如果你想讓一個元素支持拖拽，你也需要創建一個指令來實現它。指令背后基本的想法很簡單。它通過對元素綁定事件監聽或者改變DOM而使HTML擁有真實的交互性。

jQuery視角

想象一下使用jQuery如何創建一個日期選擇器。首先，我們在HTML中添加一個普通的輸入框，然后通過jQuery調用 $(element).dataPicker() 來將它轉變成一個日期選擇器。但是，仔細想一下。當一個設計人員過來檢查HTML標記的時候，他/她能否立刻猜到這個字段實際上表示的內容？這只是一個簡單的輸入框，或者一個日期選擇器？你需要查看jQuery代碼來確定這些。而Angular的方法是使用一個指令來擴展HTML。所以，一個日期選擇器的指令可以是下面的形式：

<input type="text" />

或者是這樣：

<input type="text" />

這種創建UI組建的方式更加直接和清晰。你可以輕易地通過查看元素就明白這到底是什么。

創建自定義指令：

一個Angular指令可以有以下的四種表現形式： 1. 一個新的HTML元素（<data-picker></data-picker>） 2. 元素的屬性（<input type=”text” data-picker/>） 3. CSS class（<input type=”text” class=”data-picker”/>） 4. 注釋（<!