帶你走近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 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應用可複用能力的架構。
AngularJS首頁展示了一個簡單的例子，用于實作Bootstrap中的 Tab功能，可以在頁面中輕松添加 Tab 功能，并且使用方法和 ul 标簽一樣簡單。HTML代碼如下：
JavaScript代碼如下：
擁有了 AngularJS，是不是覺得自己已經站在了巨人的肩膀上了？但是不要高興的太早，如果已經有了這麼多的指令供我們使用，那我們為什麼還要學習AngularJS ，為什麼還要學習自定義指令呢？
舉個簡單的例子，也許你有特殊的需求：假設你在一家财務公司工作，你需要建立一張财務表單，它需要以表格的形式展示資料、擁有綁定、編輯、校驗并且同步資料更新到伺服器的功能。表單插件很常見但是能夠滿足這些具體需求的不得而知了，是以你必須根據實際業務需求來建立自定義指令。
這就是本篇文章的目的，接下來我們會讨論如何建立 AngularJS指令。
文章開頭的自定義指令十分的簡單。它僅僅實作了同步的功能。一般指令是包含更多元素的：
效果如下：
注意這個自定義指令遵循一種格式：以"my" 為字首，類似于命名空間，是以如果你在應用中引用了多個子產品指令，你可以通過字首很容易的判斷出它是在哪定義的。這不是硬性要求，但是這樣做可以帶來很多便利。
指令的構造函數會傳回帶有屬性的JavaScript 對象。這些内容在AngularJS 首頁中都有清晰說明。以下是我對一些屬性的了解：
restrict: 說明指令在HTML中的應用形式，備選項有"A"、"E" 和 "C"， "M" ，分别代表 attribute、element、class和comment（預設值為"A"）。我們将更多的關注attributes-如何建立UI元素。
scope: 建立指令的作用範圍，scope在指令中作為屬性标簽傳遞。Scope 是建立可以複用指令的必要條件，每個指令（不論是處于嵌套指令的哪一級）都有其唯一的作用域，它不依賴于父scope。scope 對象定義names 和types 變量。上面的例子即建立了3個scope變量。
name: "@" （值傳遞，單向綁定）：
"@"符号表示變量是值傳遞。指令會檢索從父級scope中傳遞而來字元串中的值。指令可以使用該值但無法修改，是最常用的變量。
amount: "=" （引用,雙向綁定）
"="符号表示變量是引用傳遞。指令檢索主Scope中的引用取值。值可以是任意類型的，包括複合對象和數組。指令可以更改父級Scope中的值，是以當指令需要修改父級Scope中的值時我們就需要使用這種類型。
save: "&" (表達式)
“&”符号表示變量是在父級Scope中啟作用的表達式。它允許指令實作比修改值更進階的操作。
template: 替代原始模闆中的标記的字元串。替換功能将替換所有舊元素為新值。注意template是如何使用Scope中定義的變量的。這允許你無需寫任何額外的代碼即可建立macro-style 風格指令。replace: 說明是否替換原始标記中的值或是追加原始标記中的值。預設值是false，這時原始标記将被保留。
transclude: 說明自定義指令是否複制原始标記中的内容。例如，之前展示的“tab”指令設定了transclude 為 true，因為tab 元素包含其他HTML 元素。 "dateInput" 指令則需要在初始化時為空，是以需要設定transclude 為false。
link: 該方法在指令中扮演着重要的角色。它負責執行DOM 操作和注冊事件監聽器等。link 方法包含以下參數：
scope: 指令Scope的引用。scope 變量在初始化時是不被定義的，link 方法會注冊螢幕監視值變化事件。
element: 包含指令的DOM元素的引用， link 方法一般通過jQuery 操作執行個體（如果沒有加載jQuery，還可以使用Angular's jqLite ）。
注意，當調用link 方法時， 通過值傳遞（"@"）的scope 變量将不會被初始化，它們将會在指令的生命周期中另一個時間點進行初始化，如果你需要監聽這個事件，可以使用scope.$watch 方法。
在下一篇文章中我們将一起熟悉幾個AngularJS自定義指令。
相關閱讀：
<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>