iT邦幫忙

DAY 30
19

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

Day30- 入門AngularJS筆記-directive

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

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

好處:

  1. 節省整個網站的製作時間
  2. 精簡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的命名規則-

  1. 駝峰式命名(Camel-Case)例如:ngBind
  2. 蛇形命名(Snake-Case)必須以:冒號 - 減號 _下底線來連接
  3. 配合 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


上一篇
Day29- 入門AngularJS筆記-filter
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

2 則留言

0
yunhann
iT邦新手 5 級 ‧ 2014-07-29 20:10:41

很清楚好懂的筆記,謝謝分享!

我要留言

立即登入留言