Angular directive (續二: directive 不只能做成 HTML的 element)

Angular directive 在 HTML 裡呈現的方式可以是

1. 當成一個 element 例如: <ng-taiwan/>
2. 當成一個 element 的 attribute 例如 <div ng-app></div>
3. 視為一個 class, 例如: <input type="text" class="ng-hello"/>
4. 或當成一個註解, 例如 <!--directive:ng-ming-->

所以我們可以來試試看每一種的用法,

還是拿第一個 directive 的程式碼來改起, 它是屬於第一類做成一個 HTML 的 element.

http://codepen.io/mingder78/pen/HyfAb

所以 JS (Javascript) 程式碼裡 (如上圖), 至少要有一個 angular.module (模組), 它有兩個參數, 一個適模組名 (這裡是 'myApp') , 另一個是該模組還依賴哪些其他模組的陣列 (這裡沒有用到其他任何模組, 所以是空陣列 [ ] .)

你可以把每一個 module 當成 directives 或其他例如 controllers, filters, 或 services 等的容器, 所以我們也可以寫成

有沒有清楚一些, 其實 Javascript 可以把程式一直串下去 (cascading), 所以才會有第一種寫法, 當然如果自己也把程式細分成很多模組, 同一個程式也可以寫成這樣

結果是一樣的, 其實我最喜歡最後一種, 因為程式會越來越大, 能把不同的功能做成模組, 未來可以個別使用, 遠比所有不相干的東西都放在同一個 myApp 模組來的更合理些.

再來看看 directive 怎麼寫, 它也是有兩個參數, 一個是該 direcitve 的名稱, 另一個是回傳一個結構體的 function. 首先需知道的是這 directive 的名稱是有嚴格規定, 而相對的在 HTML 裡確用另一個寫法, 其實他們指的都是同一個 diretive. 我想這是 Angular 初學者最無法用直覺容易了解的東西. 但它就是如此. 在 Javascript 裡要用 CamelCase 的方式命名, 也就是好幾個字連在一起, 除了第一個字小寫, 其他都大寫. 例如 'I Love You", 在 Javascript 裡要寫成 'iLoveYou', 相對的同一個 directive 在 HTML 裡確要用 dash-delimited 的寫法, 也就是 'i-love-you' 都是小寫, 且用 '-' (dash) 符號把它們連起來.

所以在這個範例裡 HTML 用 ng-taiwan, 在 Javascript 裡用 'ngTaiwan'. 除了Angular element 會用這種命名方式, 如果 attributes (變數) 也有可能發生.

最後說明一下 function 回傳的值, 有很多變數需設定, 但這裡至少用到 restrict: 以及 template: 就先說明這兩個變數吧

restrict (限制) 的值有可能, 或同時用到 'E', 'A', 與 'C', 看你這個 directive 是要只能當成 'Element' 還是 'Attribute' 還是 'Class', (還有 'M' 代表這 directive 當成註解) 這就是為何這篇文章開宗明義, 它可以不只是 element 的作法.

template (樣板) 是最簡單的, 用一個 HTML 的文法來當取代 HTML 裡該 directive 在 DOM 裡的元素. 所以很簡單解釋這個範例程式, 就是下面 HTML 程式碼裡的 <ng-taiwan></ng-taiwan> 部分, 在顯示之前會塞入 <h1>哈囉 {{ sometext }}! using directive: ng-taiwan </h1> 這就是為什麼它的結果跟 Angular 101 裡的範例程式結果相同.

其實還有一個參數我沒用, 就是 replace (替代), 如果 replace: true, 樣板的部份, 就會整個替換掉 <ng-taiwan></ng-taiwan> 的部份.