AngularJs功能（六）--指令

指令 Directive

指令系統（Directive）是Angular應用的一個重要特性。

是經過對DOM元素的標籤丶屬性來加強HTML表現力，爲其增長一些特定功能。
本篇參考文檔Angular菜鳥教程

內置指令

這裏介紹的是經常使用的一些angularJs內置指令：

一、ng-model
這個是將表單控件和當前做用域的屬性進行綁定。須要注意綁定的scope的範圍（父scope與子scope）。
ng-model主要綁定的元素包括input， select， textarea 。
ng-model的元素都有：
ng-valid（可用），
ng-invalid （不可用）
ng-pristine（用戶爲對這個元素進行操做過），
ng-dirty（元素的模型發生改變的話）屬性； 這幾個屬性都是布爾值。

二、ng-init
該指令被調用時會初始化內部做用域。通常不建議使用此參數。

三、ng-app
用於告訴 AngularJS 應用當前這個元素是根元素。
全部 AngularJS 應用都必需要要一個根元素。
HTML 文檔中只容許有一個 ng-app 指令，若是有多個 ng-app 指令，則只有第一個會被使用。
下邊是關於ng-app須要注意的點：
1>這個是必需的。使用該指令自動啓動一個AngularJS應用。
2>ngapp指令指定的應用程序的根元素，一般放置在網頁的根元素如body或html 標籤。
3>只有一個AngularJS應用能夠自動引導每一個HTML文檔。
4.第一ngapp找到該文件將定義自動引導的根元素的應用。
5>運行多個應用程序在一個HTML文件，您必須手動引導他們使用angular.bootstrap。
6>AngularJS應用不能互相嵌套。
7>你能夠指定一個AngularJS模塊被用於應用程序的根模塊。
8>該模塊將被加載到應用程序時，引導到$injector對象中。
9>它應該包含所需的應用程序代碼，或依賴於將包含代碼的其餘模塊的依賴關係。

四、ng-controller
用於爲你的應用添加控制器。

<element ng-controller="expression"></element>//expression     控制器名。

在控制器中，你能夠編寫代碼，製做函數和變量，並使用 scope 對象來訪問。

五、ng-form
Angular表單實際上是Angular提供的Directive，它有一個別名叫ng-form。是這個Directive實例化了一個FormController來負責表單內的頁面邏輯（主要是表單驗證）。

六、ng-disabled
設置表單輸入字段的 disabled 屬性(input, select, 或 textarea)。
若是 ng-disabled 中的表達式返回 true 則表單字段將被禁用。
咱們能夠在AngularJS中經過表達式返回值true/false令其生效。

<input ng-disabled="expression"></input>//expression 若是表達式返回true，則設置爲元素添加 disabled 屬性。

七、ng-readonly
設置表單輸入字段設爲只讀。
能夠經過表達式返回值true/false將表單輸入字段設爲只讀。

八、ng-checked
設置是否選中複選框。
其中 ng-true-value="''" ng-false-value="''"，可用來設置選中時或不選中時對應的值

九、ng-selected
用於設置 <select> 列表中的 <option> 元素的 selected 屬性。
ng-selected 屬性的表達式返回 true 則選項被選中。

十、ng-show/ng-hide
根據表達式顯示/隱藏HTML元素，注意是隱藏，不是從DOM移除（ng-if纔是移除）
對於大對象的DOM，能夠用它，但若是是小對象的DOM，建議使用ng-if

十一、ng-change
ng-change 指令用於告訴 AngularJS 在 HTML 元素值改變時須要執行的操做。
ng-change 指令須要搭配 ng-model 指令使用。
AngularJS ng-change 指令指令不會覆蓋原生的 onchange 事件, 若是觸發該事件，ng-change 表達式與原生的 onchange 事件都會執行。
ng-change 事件在值的每次改變時觸發，它不須要等待一個完成的修改過程，或等待失去焦點的動做。
ng-change 事件只針對輸入框值的真實修改，而不是經過 JavaScript 來修改。

十二、{{}}
其實這個也是一個指令，也許以爲和ng-bind差很少，但頁面渲染略慢時可能會被看到。
另外，{{}}的執行遠不如ng-bind，只是用起來很方便。

1三、ng-bind
使用給定的變量或表達式的值來替換 HTML 元素的內容。
若是給定的變量或表達式修改了，指定替換的 HTML 元素也會修改。
ng-bind的行爲和{{}}差很少，只是咱們能夠用這個指令來避免FOUC(Flash Of Unrendered Content)未渲染致使的閃爍。

ng-bind-template指令
將給定表達式的值替換 HTML 元素的內容。
當你想在 HTML 元素上綁定多個表達式時可使用 ng-bind-template 指令。

1四、ng-cloak
ng-cloak也能夠爲咱們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由調用對應的頁面。
FOUC ：文檔樣式短暫失效
若是使用import方法對CSS進行導入,
會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:
以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content)
存在徹底是爲了用戶體驗，
若是一個html界面angular.js還沒加載進來，
那麼界面會有{{}}這樣的標誌，若是{{}}標誌多了，用戶會一臉矇蔽 啊，
ng-cloak若是加在根節點，那麼界面的{{}}會被隱藏，等到{{}}徹底編譯成動態數據的時候界面纔可見；

1五、ng-if
若是ng-if中的表達式爲false，則對應的元素整個會從DOM中移除而非隱藏，
但審查元素時你能夠看到表達式變成註釋了。若是相進行隱藏，可使用ng-hide。

1六、ng-switch
ngSwitch指令包含ng-switch-when、ng-switch-default功能相似switch，
ng-switch-when指條件條件符合將顯示這個dom元素，
ng-switch-default指條件都不符合默認顯示的元素。

1七、ng-repeat
遍歷集合(數組)，給每一個元素生成模板實例，每一個實例的做用域中能夠用一些特殊屬性，以下

<ul ng-repeat="user in data"><ul>
$index : 表示當前item的索引,
$first : 若是item爲第一個，那麼$first爲true ,
$middle : 若是item不是開頭，不是結尾$middle爲true,
$last : 若是item是最後一個，  $last爲true,
$even : 若是索引爲偶數， 那麼$even爲true,不然爲false
$odd : 同上， 索引爲奇數$odd爲true....;

1八、ng-src
指令覆蓋了 <img> 元素的 src 屬性。
若是你使用了 AngularJS 代碼設置圖片地址，請使用 ng-src 指令替代 src 屬性。
ng-src 指令確保的 AngularJS 代碼執行前不顯示圖片。
界面加載的時候才無論img的標籤src有什麼
都會一併加載
若是圖片的src包含了{{ **}}這些字符
瀏覽器不會管這是什麼東西
在渲染dom樹的時候
會直接請求這個地址
angular框架是在DOMcontent加載完畢後纔開始發揮做用。
假如咱們模板中有一張圖片以下：
<img src=" http://m.cnblogs.com/142260/」{{imgUrl}}」 />
　　那麼在頁面開始加載到ng編譯完成以前，頁面上會一直顯示一張錯誤的圖片，由於路徑{{imgUrl}}還未被替換。
爲了不這種狀況，咱們使用ng-src指令，這樣在路徑被正確獲得以前就不會顯示找不到圖片。同理，a標籤的href屬性也須要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的連接。

1九、ng-href
覆蓋了原生的 a 元素 href 屬性。
若是在 href 的值中有 AngularJS 代碼，則須要使用 ng-href 而不是 href。
ng-href 指令確保了連接是正常的，即便在 AngularJS 執行代碼前點擊連接。

<a href="{{myUrl}}">

20、ng-class
指令用於給 HTML 元素動態綁定一個或多個 CSS 類。
ng-class 指令的值能夠是字符串，對象，或一個數組。
若是是字符串，多個類名使用空格分隔。
若是是對象，須要使用 key-value 對，key 爲你想要添加的類名，value 是一個布爾值。只有在 value 爲 true 時類纔會被添加。
若是是數組，能夠由字符串或對象組合組成，數組的元素能夠是字符串或對象。

2一、ng-click
點擊事件

<element ng-click="event()"></element>

//
$scope.event=function(){}

2二、ngKeyup

2三、ngKeydown

2四、ngKeypress

2五、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup
鼠標事件

2六、ngTrim
去除左右空格

2七、ng-include
指令用於包含外部的 HTML 文件。
包含的內容將做爲指定元素的子節點。
ng-include 屬性的值能夠是一個表達式，返回一個文件名。
默認狀況下，包含的文件須要包含在同一個域名下。
ng-include指令是指這個指令標籤的innerHTML爲指定的url
這個url爲相對與當前目錄的url地址或者絕對地址
angular會經過ajax請求該地址
而後把地址的內容做爲指令元素innerHTML填充；

2八、ng-list
指令將字符串轉換爲數組，並使用逗號分隔。
ng-list 指令還有另一種轉換方式，若是你有字符串數組但願在輸入框中顯示，你能夠在 input 上使用 ng-list 指令。
ng-list 屬性值定義了分隔符。
ng-list這個指令要和ng-model合起來用
ng-list在輸入框的表現經過split(",")的數組纔是實際的model
ng-list默認爲","逗號
要設置成自定義的區分符，直接爲ng-list賦值便可;

2九、ng-pattren
匹配這個輸入框的輸入值是否符合這個正則，若是不匹配，這個元素會被加上ng-invalid的class， 若是匹配會被加上ng-valid的class
在表單校驗中爲詳細介紹。。

30、ng-paste ng-copy ng-cut
用於告訴 AngularJS 文本在 HTML 元素上粘貼時須要執行的操做。
ng-paste 指令不會覆蓋元素的原生 onpaste 事件, 事件觸發時，ng-paste 表達式與原生的 onpaste 事件將都會執行。
若是輸入框的值是粘帖的，那麼ng-paste就爲真。
ng-copy，ng-cut也是同理

3一、ng-non-bindable
　ng-non-bindable指令指該元素的內部{{ **}}不被綁定和轉義，不受angular的掌控：

3二、ng-open
用於設置 details 列表的 open 屬性。
若是 ng-open 的表達式返回 true 則 details 列表是可見的。
這個我的認爲和ng-show， g-hide差很少， 區別是ng-open只能綁定details元素，
<details> 標籤用於描述文檔或文檔某個部分的細節。
（details標籤目前只有webkit瀏覽器支持）

3三、input裏的一些屬性
novalidate屬性（可無值）到form標籤上，這樣能夠保證在表單不合法的狀況下阻止瀏覽器繼續提交數據。
使用 ng-model 屬性進行綁定的表單，會自動的添加一些 class 樣式，如：
@非必填表單
初始化時會添加 .ng-pristine 和 .ng-valid 兩個class樣式。當表單爲非空時 class 樣式會變成 .ng-valid 和 .ng-dirty 。其中將 .ng-pristine 變成了 .ng-dirty 。
@必填表單
初始化時會添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三個class樣式。當表單爲非空時 class 樣式會變成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。
ngMinLength,，ngMaxLength，ng-parttern，經過正則判斷input是否匹配，
表單驗證屬性：
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
ng-change，ng-vlaue就只是設置值而已 不雙向綁定數據
（一樣在表單驗證中會詳細介紹）

自定義指令

自定義是AngularJ很是強大而有有用的功能之一。它就至關於爲咱們寫了公共的自定義DOM元素或Class屬性或Attr屬性，還能夠在它的基礎上來操做scope、綁定事件、更改樣式等。經過這個Directive，咱們能夠封裝不少公共指令，好比分頁指令、自動補全指令等等。而後在HTML頁面裏只須要簡單的寫一行代碼就能夠實現不少強大的功能。
通常狀況下，須要用Directive有下面的情景：
1.使你的Html更具語義化，不須要深刻研究代碼和邏輯便可知道頁面的大體邏輯。
2.*抽象一個自定義組件，在其餘地方進行重用。

指令的屬性

先上代碼

angular.module("MetronicApp").directive('directiveName', function factory(injectables) {
  var directiveObject = {　　
        priority: 0,
    　　template: '<div>hello<span>world</span></div>',
    　　templateUrl: 'directive.html',
    　　replace: false,
    　　transclude: false,
    　　restrict: 'EA',
    　　scope: false,
    　　link: function postLink($scope, $element, $attrs) {
    　　//code
        }
        controller: ['$scope', function ($scope) {
        //code
        }
   };
   return directiveObject
});

name就是指令名

對應上面代碼中的directiveName

restrict 定義指令的出現形式

（字符串）可選參數，指明指令在DOM裏面以什麼形式被聲明；
取值有：E(元素),A(屬性),C(類),M(註釋)，其中默認值爲A；
固然也能夠兩個一塊兒用，好比EA.表示便可以是元素也能夠是屬性。
E(元素)：<directiveName></directiveName>
A(屬性)：<div directiveName='expression'></div>
C(類)： <div class='directiveName'></div>
M(註釋)：<--directive:directiveName expression-->
鑑於瀏覽器兼容問題。推薦 restrict :'A',即取值爲屬性。

scope 做用域，與值綁定

（1）默認值false。表示繼承父做用域;
（2）true。表示繼承父做用域，並建立本身的做用域（子做用域）;
（3）{}。表示建立一個全新的隔離做用域；
scope: {
　　 lover: '=',
　　 name: '@',
　　 say: '&'
　　}
可是，若是我想將父scope中的屬性傳遞給directive的scope怎麼辦呢？
directive 在使用隔離 scope(新的做用域) 的時候，提供了三種方法同隔離以外的地方交互：
'@' 綁定一個局部 scope 屬性到當前 dom 節點的屬性值。結果老是一個字符串，由於 dom 屬性是字符串。
'&' 提供一種方式執行一個表達式在父 scope 的上下文中。若是沒有指定 attr 名稱，則屬性名稱爲相同的本地名稱。
'=' 須要實現雙向數據綁定的時候使用。（最常使用）

template模板

可使一段html代碼。

template: '<div>hello<span>world</span></div>',

也能夠是一個實例函數：
其中$element,是指使用此指令的元素，而$element,則實例的屬性，它是一個由元素上全部的屬性組成的集合（對象）

<div directive-name title="我是title"></div>
////////
template: function($element, $attrs){ 
   var _html = ''; 
   _html += '<div>' +'hello '+ $attrs.title+'</div>'; //這裏的title就是這個指令裏的title屬性。
   return _html; 
   } 
 };

一樣有很明顯的一個缺點，你也能夠將整個template寫得很複雜，可是，複雜的代碼很是不易維護。而且你還得換行，得用字符串拼接每一行。過長的template建議使用templateUrl代替。

templateUrl模板

templateUrl爲從指定地址獲取模板內容。即你要在指令所在的容器中插入的一個.html文件。
當使用templateUrl模板時，須要運行一個服務器，否則使用templateUrl會報錯 Cross Origin Request Script（CORS）錯誤。
因爲加載html模板是經過異步加載的，若加載大量的模板會拖慢網站的速度，項目中對模板進行了緩存，是可取之處。以下

<script type='text/ng-template' id='directive.html'> 
   <div>
     <h1>Hello World</h1>
     <div>{{name}}</div>
   </div> 
</script>

這裏的id屬性就是被設置在templateUrl上用的。
這裏的templateUrl相似於JSP中的include。有沒有明白一點。

replace

是否用模板替換當前元素。
true : 將指令標籤替換成temple中定義的內容,頁面上不會再有<directive-name>標籤；
false ：則插入當前元素內，即模板的內容包在<directive-name>標籤內部。默認false。

transculde：

是否使用ng-transculde來包含html中指令包含的原有的內容，接收兩個參數true/false。默認值爲false；
這個配置選項可讓咱們提取包含在指令那個元素裏面的內容，再將它放置在指令模板的特定位置。當你開啓transclude後，你就可使用ng-transclude來指明瞭應該在什麼地方放置transcluded內容。
有些高階的東西，用的很差就是bug。

link

能夠簡單理解爲，當改自定義指令被angular 編譯後，執行該方法。
主要的三個參數
$scope(當前指令內部做用域，和scope綁定有關),
$element(指的是html中的指令標籤的對象，能夠理解成$（'directive對象'），相似jquery的選擇器。),
$attrs(指令元素的屬性的集合)
link在angular編譯後執行
link函數主要用於操做dom元素,給dom元素綁定事件和監聽.

controller

同link的區別在於
controller操做的是業務邏輯。因此一般使用的只有$scope參數。而且能夠經過注入方式依賴其餘模塊。
以下

controller: ['$scope', '$location','UrlConfigService', function ($scope, $location,UrlConfigService) {
    $scope.onActionClick = function (row, parentMethod) {
            //code
        };
}

compile

這個是在angular編譯階段執行的方法。compile在編譯前執行，目的是負責把template（包括transclude所引用的）變成一個完整的DOM結構。

關於angular的編譯過程這裏給你們一個連接，可作了解。angular編譯及生命週期

priority

多個指令設置在同一個元素上的執行優先級,執行順序從低高:1>2>3；
priority的值爲正整數，好比priority: 1,

ngHello的優先級確定要高於ngWorld，不過實際中沒人這麼用，這裏只作講解。

angular.module("MetronicApp").directive("ngHello",function(){ 
 return{ 
  restrict: 'EA',
  priority: 1,
  link : function(){
   //code
  }   
 }; 
})

angular.module("MetronicApp").directive("ngWorld",function(){ 
 return{ 
  restrict: 'EA',
  priority: 2,
  link : function(){
   //code
  }   
 }; 
})

terminal

兩個參數true/false 若是爲true,本指令的優先級高於同一個元素上的其餘指令，其餘指令將中止執行。一樣實際中不使用，只作瞭解。

angular.module("MetronicApp").directive("ngBook",function(){ 
 return{ 
  restrict: 'EA',
  priority: 3,
  terninal: true, //這裏爲true,ngHello和ngWorld都將中止執行
  link : function(){
   //code
  }   
 }; 
})

指令的部分先介紹到這，若是在從此的實踐中有發現不足和缺失再繼續完善。此篇是讓你們對指令有個規範瞭解。在項目中方便理解指令用法。例如table列表帶分頁（ng-table），查詢列表（ng-tableinput） 展現列表（ng-list）（industry-field） 。也方便在從此本身封裝，拆分一些公共功能模塊。