林炳文Evankaka原創作品。出處http://blog.csdn.net/evankaka
本教程使用AngularJS版本:1.5.3
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下載地址:https://angularjs.org/
摘要:本文主要介紹了AngularJs中自帶的指令
1、ng-model
這個大家都非常熟悉了,就是將表單控件和當前作用域的屬性進行綁定。需要注意綁定的scope的范圍(父scope與子scope)。
2、ng-init
用得比較少,該指令被調用時會初始化內部作用域。一般不建議使用此參數。
3、ng-app
這個是必需的。使用該指令自動啟動一個AngularJS應用。ngapp指令指定的應用程序的根元素,通常放置在網頁的根元素如body或html 標簽。
只有一個AngularJS應用可以自動引導每個HTML文檔。第一ngapp找到該文件將定義自動引導的根元素的應用。運行多個應用程序在一個HTML文件,您必須手動引導他們使用angular.bootstrap。AngularJS應用不能互相嵌套。
你可以指定一個AngularJS模塊被用於應用程序的根模塊。該模塊將被加載到應用程序時,引導到$injector對象中。它應該包含所需的應用程序代碼,或依賴於將包含代碼的其他模塊的依賴關系。更多信息見angular.module。
4、ng-controller
這個也是經常用到的,用來定義一個控制器。注意格式
5、ng-form用來定義一個from,通常是用來驗證參數。通常可以和以下標簽一起使用
ng-valid (有效的).
ng-invalid (無效的).
ng-pristine (原始,簡介).
ng-dirty (臟的).
ng-submitted (提交的)
6、ng-disabled
像這種只要出現則生效的屬性,我們可以在AngularJS中通過表達式返回值true/false令其生效。禁用表單輸入字段。
7、ng-readonly
通過表達式返回值true/false將表單輸入字段設為只讀。
8、ng-checked
設置是否選中復選框。其中 ng-true-value="''" ng-false-value="''",可用來設置選中時或不選中時對應的值
9、ng-selected
給<select>里面的<option>用的
10、ng-show/ng-hide
根據表達式顯示/隱藏HTML元素,注意是隱藏,不是從DOM移除(ng-if才是移除),對於大對象的DOM,可以用它,但如果是小對象的DOM,建議使用ng-if
11、ng-change
不是HTML那套onXXX之類的,而是ng-XXX。用來設置input/select等內容發生變化時的事件
12、{{}}
其實這個也是一個指令,也許覺得和ng-bind差不多,但頁面渲染略慢時可能會被看到。另外,{{}}的performance遠不如ng-bind,只是用起來很方便。
13、ng-bind
ng-bind的行為和{{}}差不多,只是我們可以用這個指令來避免FOUC(Flash Of Unrendered Content),也就是未渲染導致的閃爍。
14、ng-cloak
ng-cloak也可以為我們解決FOUC。 ng-cloak會將內部元素隱藏,直到路由調用對應的頁面。
15、ng-if
如果ng-if中的表達式為false,則對應的元素整個會從DOM中移除而非隱藏,但審查元素時你可以看到表達式變成注釋了。如果相進行隱藏,可以使用ng-hide。
16、ng-switch
ngSwitch指令包含ng-switch on、ng-switch-when、ng-switch-default功能類似switch,ng-switch on指要判斷的值,ng-switch-when指條件條件符合將顯示這個dom元素, ng-switch-default指條件都不符合默認顯示的元素。
17、ng-repeat
遍歷集合(數組),給每個元素生成模板實例,每個實例的作用域中可以用一些特殊屬性,如下
$index
$first
$last
$middle
even
18、ng-href
起初我在一個文本域中弄了個ng-model,然后像這樣<a href="{{myUrl}}">在href里面寫了進去。
19、ng-src
大同小異,即表達式生效前不要加載該資源。
20、ng-class
用作用域中的對象動態改變類樣式,
21、ng-click
點擊事件
22、ngKeyup
鍵盤事件
23、ngKeydown
鍵盤事件
24、ngKeypress
鍵盤事件
25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup
鼠標事件
26、ngTrim
去除左右空格
