iT邦幫忙

DAY 3
4

已廢除請轉移至(用MAN架構打造超人般的網頁應用程式:復仇者聯盟)系列 第 3

用MAN架構打造超人般的網頁應用程式-Day 09:AngularJS - Directives

今天要談到的是Directives,這相當於AngularJS精髓的東西,透過Directives我們可以不必像以前直接操作dom物件去控制畫面的產生,只要兩邊繫結後直接修改來源即可改變成現的樣子。
用MAN架構打造超人般的網頁應用程式系列文章
用MAN架構打造超人般的網頁應用程式系列文章

Directives

  • n.指令; <美>命令,指令; 方针
  • adj.指示性的,指導性的,管理的

上面字面上的翻譯,而在AngularJS裡就如同他字面上的意思,Directives是一種新的方式在DOM編譯時與Directives對應,而對應到的HTML和執行時的程式,可直接對HTML作出改變。這允許Directives 註冊新的behavior,或者改造DOM的內容。

上面這張圖幫我們說明了在AngularJS各技術的架構關聯情況(右下角的Factory之後會介紹道),而Directives主要就是幫我們做頁面客制呈現的一種two-way binding的方式

範例

線上範例

這邊你可以輸入你文後就一起修改下面的內容,而這是一般的two-way binding

這邊我們再看如何透過Directives一行程式碼就幫我們做出下拉選項

線上範例

上面這個範例,我們只透過一行ngRepeat的方式來產生select裡面的option

	  <select >
        <option ng-repeat="name in names" >{{name}}</option>
      </select>

而且只要增加$scope.names裡面陣列的內容就可以直接對下拉的選項作出對應的改變,是不是非常方便阿。

詳細指令請參考官網Directive

結語

Directives使用非常簡單,而透過瞭解Directives就可以做好呈現上的一些調配,讓我們可以直接透過變數修改就可以達到頁面呈現的修正,Day-9 over!


上一篇
用MAN架構打造超人般的網頁應用程式-Day 08:AngularJS - Plugin:UI-Router
下一篇
用MAN架構打造超人般的網頁應用程式-Day 12:AngularJS - Service
系列文
已廢除請轉移至(用MAN架構打造超人般的網頁應用程式:復仇者聯盟)4

尚未有邦友留言

立即登入留言