這是一篇angularjs自定義指令的教程。就讓我們來看看,如何在angularjs中自定義指令吧！我們将利用現有的guitar angularjs app，這在 教程14: angularj表單驗證 中用到過。你可以在這裡下載下傳 之前的app.好吧，現在我們看看angularjs的指令。我們知道:
angularjs directives是dom元素(例如屬性，元素名，注釋或css類)上的标記，它告訴angularjs的 html 編譯器($compile) 把特定的操作連接配接到dom元素或轉化為dom元素及其子元素。例如， ng-app 屬性是一個指令，是以 ng-controller 及所有的以ng-, ng:, ng_, x-ng-bind, data-ng-bind開頭的屬性都是。
是以，angularjs的自定義指令，就是你自己的指令，加上編譯器編譯dom時運作的原生核心函數。這可能很難了解。現在，假設我們想在應用中不同頁面複用一些特定的代碼，而又不複制代碼。那麼，我們就可以簡單地把這段代碼放到單獨的檔案，并調用使用自定義指令的代碼，而不是一遍又一遍地敲下來。這樣的代碼更容易了解。angularjs中有四種類型的自定義指令：
元素指令
屬性指令
css class 指令
注釋指令
在我們現有的app中實作他們之前，我們來看看自定義指令是個什麼樣子:
在html中寫下如下的标簽,它用來放置代碼片段。當我們想使用特定的代碼，我們就用上述标簽來包含該代碼。
在js檔案中，用以下幾行代碼來使上述angularjs自定義指令生效。
代碼解釋:
如同app.controller，我們先定義app.directive，然後定義guitarreview,後者是html中用到的元素标簽名。但是你注意到沒有，guitar-review 和guitarreviews是不同的?這是因為 guitar-reviews的連字元轉換到駝峰式大小寫，因而在js檔案中就變成了guitarreviews。下一步是正在傳回參數的匿名函數。 restrict: ‘e’ 是指我們在定義一個自定義元素指令，而 templateurl則指向要包含的代碼片段檔案。
在html檔案的html标簽中敲入如下屬性，這個标簽用來盛放代碼片段。當我們想使用特定代碼片段，我們隻要敲下這樣的标簽來包含該代碼。
在js檔案中，用以下代碼來使上述angularjs自定義指令生效。
注意: angularjs 推薦你用簡單的 css 和普通的注釋代替自定義指令中的css和注釋.
現在讓我們在app中實作自定義指令吧。你可以在這裡下載下傳項目檔案。我把reviews部分的代碼放到單獨的檔案，再把該代碼片段賦給一個元素，最後在details.html頁面中使用.
第一步
在指定的檔案夾下建立一個檔案夾命名為cdirectives，用來存放自定義的指令。然後，在該檔案夾下建立一個reviews.html檔案，用于持有使用者的reviews。此時，你的檔案夾層次結構如下：
第二步
在details.html中剪切review部分，并添加标簽如下所示：
第三步
将你在details.html頁面中剪切的代碼拷貝至reviews.html如下所示：
第四步
現在可以在user-reviews标簽中添加行為了。讓我們打開controller.js，添加如下代碼：
代碼解釋：
我們的指令在這裡變成了userreviews(以camel形式表示)并且連字元不見了。下面我們可以說，當它被調用時加載templateurl中的檔案并且對元素e限制該指令。
我們剛剛自定義了一個指令。盡管看起來我們的應用中沒有變化，但是現在我們的代碼較之前已經進行了很好的規劃。你能為描述和規格自定義指令嗎？自己嘗試一下吧。
有趣的部分：
你可以通過css為你的user-reviews添加樣式，就像你對于div層的處理一樣。
下載下傳項目檔案。
希望你喜歡，并分享我的工作~