Day30- 入門AngularJS筆記-directive

DAY 30

入門AngularJS筆記與前端領域的學習筆記分享系列第 30 篇

javascript 鐵人賽 angularjs

iamya

2013-10-30 23:42:38

49401 瀏覽

分享至

終於到了第三十天，
這段日子大多分享angularJS內建的directive筆記，
有些內建指令可以直接完成我們想要的效果。
但有些內建的指令無法滿足需求，
也希望盡可能達到專案模組化的目標，那就試試看自訂directive吧！

directive是什麼？
是透過Angular使用內建或自訂directive用來自己定義html元素，
並簡化dom操作。

好處:

節省整個網站的製作時間
精簡HTML內容

本篇主要筆記如何自訂簡單的directive

此範例為restrict: 'A' 自訂一個屬性、給予樣式，直接將樣式套用在標籤上。
http://jsbin.com/emimuq/3/edit

此範例為restrict: 'A' 自訂一個屬性、給予樣式，使用按鈕觸發。
http://jsfiddle.net/L7QEE/15/

*此範例為restrict: 'A' 自訂一個屬性、有條件的給予樣式(使用ng-class)
http://jsfiddle.net/CmTmc/3/

*不使用directive，較簡單用法(與上方範例結果相同)
http://jsbin.com/eyexir/3/edit
如何自訂簡單的directive？

首先說明directive的命名規則-

駝峰式命名（Camel-Case）例如：ngBind

蛇形命名（Snake-Case）必須以：冒號 - 減號 _下底線來連接

配合 HTML5 中針對自訂屬性的規範，
directive也可以用「x-」或者「data-」作為前綴

合法命名如下：

ng:bind
ng-bind
ng_bind
x-ng-bind
data-ng-bind

directive怎麼用？

指定此directive的使用方式：

‘A’ – Attribute (You want to use your directive as )
‘E’ – Element (Use it as )
‘C’ – Class. (Use it like )
‘M’ – Comment (Use it like <!– directive: rating –>

使用restrict可以定義directive是A(屬性)或E(元素)或C(類別)或M(註解)

定義directive為元素的簡單範例

html-這邊我們自訂了1個directive標籤，名稱為test1

  <test1></test1>

js-新增對應的directive，名稱也是test1

app.directive("test1",function(){
    return {
        restrict: "E",
        template: "<div>test</div>"
    };
});

此範例是restrict: "E"，是用來定義directive為元素。
如此一來，test1標籤透過自訂的directive，就可以回傳想要顯示的內容。

完整範例：

http://jsbin.com/usiyoq/1/edit

另外針對基本的directive，我也搜尋網路上的範例，並簡單改寫以下範例

此範例為restrict: 'A' 自訂一個屬性、給予樣式，直接將樣式套用在標籤上。
http://jsbin.com/emimuq/3/edit

此範例為restrict: 'A' 自訂一個屬性、給予樣式，使用按鈕觸發。
http://jsfiddle.net/L7QEE/15/

*此範例為restrict: 'A' 自訂一個屬性、有條件的給予樣式(使用ng-class)
http://jsfiddle.net/CmTmc/3/

*不使用directive，較簡單用法(與上方範例結果相同)
http://jsbin.com/eyexir/3/edit

此範例使用directive，實作星星評分。
http://jsfiddle.net/abhiroop/G3UCK/1/light/

使用directive，實作background-image效果
http://jsfiddle.net/jaimem/aSjwk/1/

同樣使用directive，實作background-image效果，但更靈活的可以設定值
http://jsfiddle.net/BinaryMuse/aSjwk/2/

來源:
http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl

改寫:
http://jsfiddle.net/aSjwk/17/

其他相關文章：

AngularJs學習筆記–directive
http://www.chawenti.com/articles/6545.html

AngularJS Directive Scope Note
http://ticore.blogspot.tw/2013/06/angularjs-directive-scope-note.html

《AngularJS》5個實例詳解Directive（指令）機制
http://rritw.com/a/bianchengyuyan/C__/20130803/406903.html

AngularJS – directives簡介
http://john24318.wordpress.com/2013/08/24/angularjs-directives%E7%B0%A1%E4%BB%8B/

神奇的directive!
http://my-frontend.blogspot.tw/2013/07/directive.html

[AngularJS]AngularJS 入門教學 - 宣告式語法的使用方式
http://abgne.tw/angularjs/angularjs-getting-stared/how-to-use-directives.html

進階範例
Tags Directive -- AngularJS
http://hamisme.blogspot.tw/2013/06/tags-directive-angularjs.html

官方文件
http://docs.angularjs.org/guide/directive

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
https://ithelp.ithome.com.tw/articles/10140689

Day29- 入門AngularJS筆記-filter
https://ithelp.ithome.com.tw/articles/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
https://ithelp.ithome.com.tw/articles/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
https://ithelp.ithome.com.tw/articles/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
https://ithelp.ithome.com.tw/articles/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
https://ithelp.ithome.com.tw/articles/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
https://ithelp.ithome.com.tw/articles/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
https://ithelp.ithome.com.tw/articles/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
https://ithelp.ithome.com.tw/articles/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
https://ithelp.ithome.com.tw/articles/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
https://ithelp.ithome.com.tw/articles/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
https://ithelp.ithome.com.tw/articles/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
https://ithelp.ithome.com.tw/articles/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
https://ithelp.ithome.com.tw/articles/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
https://ithelp.ithome.com.tw/articles/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
https://ithelp.ithome.com.tw/articles/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
https://ithelp.ithome.com.tw/articles/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
https://ithelp.ithome.com.tw/articles/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
https://ithelp.ithome.com.tw/articles/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
https://ithelp.ithome.com.tw/articles/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
https://ithelp.ithome.com.tw/articles/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
https://ithelp.ithome.com.tw/articles/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
https://ithelp.ithome.com.tw/articles/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
https://ithelp.ithome.com.tw/articles/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
https://ithelp.ithome.com.tw/articles/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
https://ithelp.ithome.com.tw/articles/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
https://ithelp.ithome.com.tw/articles/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
https://ithelp.ithome.com.tw/articles/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
https://ithelp.ithome.com.tw/articles/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
https://ithelp.ithome.com.tw/articles/10132196