AngularJS是一款開源JavaScript函式庫,由Google維護,用來協助單一頁面應用程式運行的。它的目標是透過MVC模式(MVC)功能增強基於瀏覽器的應用,使開發和測試變得更加容易。
今日要來介紹的是angularJS其中的一個功能Directive,他可以讓我們自己定義html元素,其功能就像 ASP.NET 的PARTIAL VIEW,產生自己想要的部份,並且給予資料和事件,以下我們就來實際寫幾個簡單的應用。
首先我們定義了一個 angular js module “myAPP”,並定義好了 controller和本次要介紹的 Directive,Directive最主要就是會回傳一個物件來告訴angular js當遇到我們定義的html元素時,該要幫我做什麼事情,以此範例來看當angular js 遇到<my-directive> 標籤時,會自動的去執行我們定義好的Directive,本次也很簡單的只產生一個<div>並且綁上myMessage model,其內容我們在controller中給予,執行網頁我們就可以看到結果會產生一個div標籤並且內容也確實是我們在controller給予的” Controller Assign”,結果如下圖,會發現在我們定義的 my-directive下面產生了我們在Directive中定義的元素。
接下來我們來介紹Directive常用的幾個屬性功能:
restrict (str) 一次可多個:
restrict : ‘CA’ restrict : ‘E’
|
Directive的元素類型,主要有四種模式
A : html 屬性 <div mytset></div> E : html 元素 <my-directvie></my-directvie> C : html class <div class=”myDirectvie”></div> M : hmtl 註解,ng-repeat的作法 <!– directive: rating –> |
replace (bool) :
true 取代標籤,false不取代。 Default 為 false |
是否要把定義的標籤取代,例如:
<my-directive> 設為ture時依照上面範例,會變成<div ng-bind=”myMessage” class=”ng-binding”>Controller Assign</div>,<my-directive>標籤將會被內容取代掉 |
scope (obj) :
scope : {}, scope : $scope |
Angular JS 中的 scope,給予一個空物件將會變成一個獨立的scope,不給予則使用目前範圍內的 controller的scope。 |
template (str) | 要回傳的html模板 |
templateurl (str)
templateurl : “view/hello.html” |
要回傳的html模板URL,可以將模板放在別的檔案中,給予其路徑angular會自動去將該檔案載入。 |
link (funciton)
link : function($scope,$elem,$attr){}
|
Directive在產生時可以在此處事先綁定事件,讓你可以初始化需要的功能或是初始值。
$scope : 此directvie的scope,依照scope屬性的定義,若不給予則和controller的相同,若是獨立的scope則此處的 scope則是只屬於此Directvie。 $elem : 依template產生的物件,可以在此進行操作。 $attr : 您給予自訂標籤的屬性,例如 : <my-directive hello=”test”>,您就會在此獲得一個物件,有hello屬性並且內容為test,這用來初始化資料相當有用。 |
**須注意Directive的命名規則是有規定的,若不照其規定功能不會正常執行
駝峰式命名(Camel-Case)例如:ngBind
蛇形命名(Snake-Case)必須以:冒號 – 減號 _下底線來連接
配合 HTML5 中針對自訂屬性的規範,
directive也可以用「x-」或者「data-」作為前綴
若你在directive宣告的名稱為myDirective,並且其restrict為E,
則在使用時所有大寫字母都要轉為小寫並且用 “-” 分隔,不然angular不會處理,或是在宣告時直接都用小寫也是可以的。
再來我們來利用Directive來做一個簡單的計時器功能,並利用scope獨立的機制,我們可以將此功能完全獨立出來變成一個可被其他module載入的功能。
Directive 的JS 如下:
結果會產生三個按鈕start開始計數、stop停止計數、clean清除時間
Directive 可以讓我們製作出許多的功能組件,在一個專案中我們可以重複的利用我們已經完成過的功能,不同的頁面若是需要一樣的功能就可以直接引用已經寫好的Directive馬上就可以有一樣的功能,增加代碼的重用性,以上為簡單的Directive 介紹,其還有許多不同的應用方式就等大家再去挖掘了。
參考資料 :
https://zh.wikipedia.org/wiki/AngularJS
https://docs.angularjs.org/api/ng/provider/$compileProvider#directive
https://docs.angularjs.org/api/ng/service/$compile