Blackie的失敗筆記

A -> AngularJS - Directives

前言

今天要談到的是Directives，這相當於AngularJS精髓的東西，透過Directives我們可以不必像以前直接操作dom物件去控制畫面的產生，只要兩邊繫結後直接修改來源即可改變成現的樣子。

Directives

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

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

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

範例

JS Bin

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

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

JS Bin

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

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

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

其他詳細指令說明請參考官網Directive

結語

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