本文實例講述了AngularJS指令用法。分享給大家供大家參考，具體如下：
指令（directives）是任何AngularJS應用中最重要的成分。盡管AngularJS已經自帶了很多指令，你經常會發現需要自己親手創建一些特別的指令。本文將會帶你了解自定義指令并解釋如何在現實世界中的Angular項目中使用它們。文章的最后，我們將一起用Angular指令來創建一個簡單的筆記小應用。
綜述
一個指令就是一個引入新語法的東西。指令是在DOM元素上做的標記，并同時附加了一些特定的行為。例如，靜態的HTML并不知道如何來創建并顯示一個日期選擇插件。為了將這個新語法教給HTML我們需要一條指令。這個指令將會創建一個充當日期選擇器的元素。我們將在隨后看到如何實現這個指令。
如果你之前已經編寫過Angular應用，那么你已經使用過指令了，不管你有沒有意識到這點。你可能已經使用過像是ng-model，ng-repeat，ng-show等等這樣的指令。所有這些指令都將特定的功能綁定到了DOM元素之上。例如，ng-repeat會重復特定的元素，而ng-show會有條件的展示元素。如果你想要創建一個可拖動元素的話你可能需要創建一個指令。指令背后的基本思想很簡單。它通過在元素上綁定事件監聽器并且將DOM變形來使HTML變得具有交互性。
從jQuery的角度來看指令
想想你如何使用jQuery來創建一個日期選擇器。我們首先在HTML中添加一個普通的input字段然后在jQuery中我們調用$(element).dataPicker()來將其轉換為一個日期選擇器。但是，考慮一下。當一個設計師想要來檢查這個標記時，他/她能夠立刻猜出這個字段究竟是干什么用的嗎？它僅僅是一個普通的input字段還是一個日期選擇器？你必須要查看jQuery來確認這點。Angular的方法是使用指令來擴展HTML。因此，一個日期選擇器的指令看上去可能如下所示：
<date-picker></date-picker>
或者如下所示：
<input type='text' data-picker/>
這種創建UI成分的方法既直觀又清楚。你可以看到元素就知道它的用途。
創建自定義指令
一個Angular指令可能以四種形式出現：
1.一個新的HTML元素（<date-picker></date-picker>）
2.一個元素上的屬性（<input type='text' date-picker/>）
3.作為一個類（<input type='text' class='date-picker'/>）
4.作為注釋（<!--directive:date-picker-->）
當然，我們完全可以決定我們的指令以什么形式出現在HTML中。現在，我們來看看一個典型的Angular指令是如何寫成的。它和controller的注冊方式類似，但是它會返回一個簡單的對象（指令定義），其中那個包含有一些配置指令的屬性。下面的代碼展示了一個簡單和Hello World指令：
var app = angular.module('myapp',[]);app.directive('helloWorld',function(){ return { restrict: 'AE', replace: true, template: '<h3>Hello World!</h3>' }});在上面的代碼中，app.diretive()函數在我們的模塊中注冊了一個新的指令。這個函數的第一個參數是指令的名稱。第二個參數是一個返回指令定義對象的函數。如果你的指令對額外的對象/服務(services)例如 $rootScope, $http 或者 $compile 有依賴，它們也可以在其中被注入。這個指令可以作為一個HTML元素來使用，如下所示：
<hello-world/>
或者：
<hello:world/>
或者作為一個屬性來使用：
<div hello-world></div>
或者：
<div hello:world/>
如果你想要兼容HTML5，你可以在屬性前面加上x-或者data-前綴。因此，下面的標記將會匹配helloWorld指令：