[技術探討] AngularJS Directive 介紹

AngularJS Directive

AngularJS是一款開源JavaScript函式庫,由Google維護,用來協助單一頁面應用程式運行的。它的目標是透過MVC模式(MVC)功能增強基於瀏覽器的應用,使開發和測試變得更加容易。

今日要來介紹的是angularJS其中的一個功能Directive,他可以讓我們自己定義html元素,其功能就像 ASP.NET 的PARTIAL VIEW,產生自己想要的部份,並且給予資料和事件,以下我們就來實際寫幾個簡單的應用。

AngularJS

AngularJS

首先我們定義了一個 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中定義的元素。

AngularJS

接下來我們來介紹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 如下:

AngularJS

結果會產生三個按鈕start開始計數、stop停止計數、clean清除時間

AngularJS

Directive 可以讓我們製作出許多的功能組件,在一個專案中我們可以重複的利用我們已經完成過的功能,不同的頁面若是需要一樣的功能就可以直接引用已經寫好的Directive馬上就可以有一樣的功能,增加代碼的重用性,以上為簡單的Directive 介紹,其還有許多不同的應用方式就等大家再去挖掘了。

 

 

 

參考資料 :

 

https://zh.wikipedia.org/wiki/AngularJS

http://blog.miniasp.com/post/2013/04/23/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx

https://docs.angularjs.org/api/ng/provider/$compileProvider#directive

https://docs.angularjs.org/api/ng/service/$compile

Comments

No comments yet. Why don’t you start the discussion?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料