AngularJs 內置指令

  林炳文Evankaka原創做品。出處http://blog.csdn.net/evankaka

 

      本教程使用AngularJS版本：1.5.3

     AngularJs GitHub: https://github.com/angular/angular.js/

    AngularJs下載地址：https://angularjs.org/

        摘要：本文主要介紹了AngularJs中自帶的指令

一、ng-model

這個你們都很是熟悉了，就是將表單控件和當前做用域的屬性進行綁定。須要注意綁定的scope的範圍（父scope與子scope）。

二、ng-init

用得比較少，該指令被調用時會初始化內部做用域。通常不建議使用此參數。

三、ng-app

這個是必需的。使用該指令自動啓動一個AngularJS應用。ngapp指令指定的應用程序的根元素，一般放置在網頁的根元素如body或html 標籤。
只有一個AngularJS應用能夠自動引導每一個HTML文檔。第一ngapp找到該文件將定義自動引導的根元素的應用。運行多個應用程序在一個HTML文件，您必須手動引導他們使用angular.bootstrap。AngularJS應用不能互相嵌套。 
你能夠指定一個AngularJS模塊被用於應用程序的根模塊。該模塊將被加載到應用程序時，引導到$injector對象中。它應該包含所需的應用程序代碼，或依賴於將包含代碼的其餘模塊的依賴關係。更多信息見angular.module。 

四、ng-controller

這個也是常常用到的，用來定義一個控制器。注意格式

五、ng-form用來定義一個from，一般是用來驗證參數。一般能夠和如下標籤一塊兒使用

ng-valid (有效的). 
ng-invalid （無效的）. 
ng-pristine （原始，簡介）. 
ng-dirty （髒的）. 
ng-submitted （提交的）

六、ng-disabled

像這種只要出現則生效的屬性，咱們能夠在AngularJS中經過表達式返回值true/false令其生效。禁用表單輸入字段。

七、ng-readonly

經過表達式返回值true/false將表單輸入字段設爲只讀。

八、ng-checked

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

九、ng-selected

給<select>裏面的<option>用的

 

十、ng-show/ng-hide

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

十一、ng-change

不是HTML那套onXXX之類的，而是ng-XXX。用來設置input/select等內容發生變化時的事件

十二、{{}}

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

1三、ng-bind

ng-bind的行爲和{{}}差很少，只是咱們能夠用這個指令來避免FOUC(Flash Of Unrendered Content)，也就是未渲染致使的閃爍。

1四、ng-cloak

ng-cloak也能夠爲咱們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由調用對應的頁面。

1五、ng-if

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

 

1六、ng-switch

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

1七、ng-repeat

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

$index
$first
$last
$middle
even

1八、ng-href

起初我在一個文本域中弄了個ng-model，而後像這樣<a href="{{myUrl}}">在href裏面寫了進去。

1九、ng-src

大同小異，即表達式生效前不要加載該資源。

20、ng-class

用做用域中的對象動態改變類樣式，

2一、ng-click

點擊事件

2二、ngKeyup

鍵盤事件

2三、ngKeydown

鍵盤事件

2四、ngKeypress

鍵盤事件

2五、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup

鼠標事件

2六、ngTrim

去除左右空格