帶你走近AngularJS系列：
<a href="http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html">帶你走近AngularJS - 基本功能介紹</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/angularjs-samples-experience.html">帶你走近AngularJS - 體驗指令執行個體</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/angularjs-custom-directive.html">帶你走近AngularJS - 建立自定義指令</a>
------------------------------------------------------------------------------------------------
之前我們已經介紹了所有的AngularJS 基礎知識，下面讓我們通過執行個體來加深記憶，體驗自定義指令的樂趣。
我們展示的第一個例子是手風琴效果指令：
效果圖如下：
不使用AngularJS的純HTML源碼如下：
以上純 HTML源碼也可以實作手風琴效果，但是它僅僅是一些标記，包含了大量的連結和id，不利于維護。
使用AngularJS自定義指令結合以下HTML源碼同樣可以得到預期效果：
這一版使用的HTML标記更少，看起來清晰且易維護。
下面，讓我們看下指令寫法。
由于擁有内部HTML内容，是以設定指令的transclude 屬性為true。模闆使用ng-transclude 指令來聲明對應的顯示内容。由于模闆中隻有一個元素，是以沒有設定其他選項。
代碼中最有趣的部分是link 方法。它在參數element具有id時啟作用，如果沒有，會依據指令的 Scope自動建立ID。一旦元素擁有了ID值，方法将通過jQuery來選擇具有"accordion-toggle"類的子元素并且設定它的 "data-parent" 和 "href" 屬性。最後，通過尋找“accordion-body” 元素，并且設定"collapse" 屬性。
這一步比較容易，大多數操作将在這個模闆中發生，但是它僅僅需要少量的代碼：
require 屬性值為"btstPane" ，是以該指令必須用于指令"btstAccordion"中。transclude 屬性為true表明頁籤包含HTML标簽。scope 下的 "title" 屬性将會被執行個體所替代。
這個例子中的模闆比較複雜。注意我們通過ng-transclude 指令來标記元素接收文本内容。
模闆中"{{title}}" 屬性将會顯示标簽名稱。目前我們僅僅實作了純文字顯示，沒有定義其樣式。我們使用link 方法可以替換标題為HTML源碼進而得到更豐富的樣式。
就這樣，我們完成了第一個具有實用價值的指令。它功能并不複雜但是足以展示一些AngularJS的重要知識點和技術細節：如何定義嵌套指令，如何生成唯一的元素ID，如何使用jQuery操作DOM以及如何使用$watch 方法監聽scope變量的變化。
下一個例子是建立Google地圖的指令：
<a href="http://jsfiddle.net/powertoolsteam/7cY9W/">Google Maps 指令</a>
在我們建立指令之前，我們需要添加Google APIs 引用到頁面中：
接下來，我們建立指令：
center 屬性進行了雙向綁定。這個應用可以改變地圖中心和互動地圖（當使用者通過滑鼠按鈕選擇地圖位置時）。同時，地圖也會在使用者通過滾動選擇地圖位置時通知應用更新目前顯示位置。
markers 屬性被定義為引用因為它是數組形式，把它序列化為字元串比較耗時。link 方法可以實作以下功能：
1. 初始化地圖
2. 在使用者視圖變量更改時更新地圖
3. 監聽事件
以下是實作代碼:
監測方法正如我們在文章開始時描述的，變量發生變化後，它将調用updateControl 方法。updateControl 方法實際上使用selected 選項建立了新的地圖。
"zoom" 和 "center" 變量将被分别處理，因為我們不希望每次在使用者選擇或縮放地圖時都重新建立地圖。這兩個方法檢測地圖是否重新建立還是僅僅是簡單的更新。
以下是updateControl 方法的實作方法：
updateControl 方法首先需要接收Scope設定相關參數，接着使用options 建立和初始化地圖。這是建立JavaScript指令的常見模式。
建立地圖之後，方法會在更新标記的同時添加檢測事件，以便監視地圖中心位置的變化。該事件會監測目前的地圖中心是否和Scope中的相同。如果不同，即會更新scope，調用$apply 方法通知AngularJS屬性已經更改。這種綁定方式為雙向綁定。
updateMarkers 方法十分的簡單，幾乎和AngularJS分離，是以我們在這裡就不介紹了。
除了這個地圖指令特有的功能，這個例子還展示了：
1. 兩個過濾器轉換坐标為正常數字到地理位置，例如33°38'24"N, 85°49'2"W。
2. 一個地理編碼器，轉換成位址的地理位置（也是基于谷歌的API）。
3. 使用HTML5的地理定位服務來擷取使用者目前位置的方法。
Google地圖 APIs 是極其豐富的。以下是一些資源入口：
最後一個例子是可編輯的表格指令：
<a href="http://jsfiddle.net/powertoolsteam/NJ8FT/">Wijmo Grid 指令</a>
這裡展示的圖表插件是 Wijmo 前端插件套包中的一款插件 wijgrid 插件：
"wij-grid" 指令定制表格的屬性，"wij-grid-column" 指令定制特性表格列的屬性。以上标記定義了一個擁有三列的可編輯表格，分别為：“country”， "product" 和 "amount"。并且，以country列分組并且計算每個分組的合計。
這個指令中最特别的一點是 “wij-grid”和“wij-grid-column”的連接配接。為了使這個連接配接起作用，父指令中定義了如下controller：
關于controller 方法使用前文中提到的數組文法聲明，在這個例子中，controller定義了addColumn 方法，它将會被"wij-grid-column" 指令調用。父指令會通過特定标記來通路列。
以下是"wij-grid-column" 指令的使用方法：
require 成員用于指定"wij-grid-column" 指令的父級指令"wij-grid"。link 方法接收父指令的引用 (controller) ，同時通過addColumn 方法傳遞自身的scope 給父指令。scope 包含了表格用于建立列的所有資訊。
更多指令
資源推薦：
相關閱讀：
<a href="http://www.cnblogs.com/powertoolsteam/p/Angular_Wijmo.html" target="_blank">開放才能進步！Angular和Wijmo一起走過的日子</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/angular_react.html" target="_blank">Angular vs React 最全面深入對比</a>
<a href="http://wijmo.gcpowertools.com.cn/wijmo-build-5-20171-293-available/" target="_blank">Wijmo已率先支援Angular4 & TypeScript 2.2</a>