AngularJS – directives簡介

directives是AngularJS重要的屬性,可以讓特定element以自訂屬性達到模組化功能。使用方法:

var app = angular.module(‘myApp’, []);

app.directive(‘directiveName’, function(){

restrict: ‘指定此directive的使用方式, 有A(屬性)/E(元素)/C(類別)/M(註解), 以A和E較常用’, ex: A: <div my-directive="exp"></div>, E: <my-directive>,

controller: function($scope){

this.Func1 = function(){ 自訂此controller的callback函數; }

},

template: ‘預先寫好的html片段’,

replace: ‘如果設為true則template會取代原來的元素,否則append到原來的元素’,

compile: funcion(element, attrs, transclude){ //先於link,編譯template到DOM元素

//return link function物件;

},

link: funcion(scope, element, attrs, ctrl){ //將local scope變數與DOM元素建立關聯

element.bind(‘eventName’, function(){

套用的element綁定事件callback, 後面的attr和ctrl兩參數可作用在其他的element上,

ex: scope.$apply.(attr.enter); //當element觸發’eventName’事件時, 執行此scope的所有具有enter屬性的回呼函數

});

},

priority: ‘當一個DOM元素包含多重directive,可設定此directive優先權。值愈大愈高,預設值是0’,

terminal: ‘如果設為true,在有設priority的多重directive下,執行到此directive時就會中止’,

scope: ‘true 或 {}’, //如果設為:

/*

true – 此directive會產生一個新的scope。注意: 多重directive的元素,只會有一個新scope。此設定不適用有template的情況,template有自己的’isolate’ scope。

{} – 獨立於directive的’isolate’ scope將會套用在此directive的template。{}裡的property可衍生parent的scope變數到自己的scope:
。@ 或 @attr – 綁定此DOM的屬性,得到的永遠是string。例如template: <widget my-attr="hello {{name}}">,此widget有scope: { localName:’@myAttr’ },則這裡localName的值會反映到parent scope的{{name}}
。= 或 =attr – local scope與parent scope的屬性雙向綁定,改變會互相反映。如果parent scope的屬性不存在會拋出NON_ASSIGNABLE_MODEL_EXPRESSION錯誤,避免這情況可以設為=? 或 =?attr。
例如:template: <widget my-attr="parentModel">,此widget有scope: { localModel:’=myAttr’ },則這裡localModel的值和parent scope的parentModel會互相反映。
。& 或 &attr – 綁定計算的expression。例如template: <widget my-attr="count=count+value">,此widget有scope: { localFn:’&myAttr’ },則這裡localFn會指向count=count+value表達式。
綜合範例:
<div ng-show="visible">
<h3>{{title}}</h3>
<div class="body" ng-transclude></div>
<div class="footer">
<button ng-click="onOk()">Save changes</button>
<button ng-click="onCancel()">Close</button>
</div>
</div>
可用以下的scope設定綁定:
scope: {
title: ‘@’, // the title uses the data-binding from the parent scope
onOk: ‘&’, // create a delegate onOk function
onCancel: ‘&’, // create a delegate onCancel function
visible: ‘=’ // set up visible to accept data-binding
}

*/

});

useful live demo:

http://jsfiddle.net/colvint/uAwJG/

https://github.com/angular/angular.js/wiki/JSFiddle-Examples

廣告
發表留言

1 則迴響

  1. AngularJS – 常用API | John's code place

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: