Make your own AngularJS directive. 做一個 AngularJS directive.

我將上一個 Angular 101 裡的範例, 改寫成用 directive 的寫法再此做個教學, 教你如何做你的第一個 Angular directive.

Angular 101 裡的範例 (Codepen 版) :

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

改用 directive 的程式範例在 Codepen 如下:

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

在 HTML 裡看出差異的地方了嗎? 就是原本

<h1>哈囉 {{ sometext }}</h1>

的地方, 用

<ng-taiwan></ng-taiwan>

代替了.

好神奇, 你也可以自己利用 Angular directive 發明自己專用的 HTML tag, 甚至於這個 tag 背後代表的就是一個 DOM 的元件 (element). AngularJS 在背後幫你做很多是, 你自己或別人想要用你分享出來的模組 (module), 除來連將你的 javascript code 載入以外, 唯一要做的就是在 HTML 文章你加入你發明的 tag, 也就是所謂的 directive, 還有利用 ng-app 把該 directive 所隸屬的模組名稱告訴 web 瀏覽器. 該 tag 的地方就會呈現出你期望的效果.

之後會介紹如何用 directive 使用  d3.js 或 bootstrap. 敬請期待.