AngularJs內置指令大全

1、ng-model
這個大家都非常熟悉了,就是將表單控件和當前作用域的屬性進行綁定。需要注意綁定的scope的範圍(父scope與子scope)。
ng-model主要綁定的元素包括input, select, textarea
ng-model的元素都有ng-valid(可用),ng-invalid 不可用
ng-pristine(用戶爲對這個元素進行操作過), ng-dirty(元素的模型發生改變的話)屬性; 這幾個屬性都是布爾值;

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
給裏面的用的

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),也就是未渲染導致的閃爍。
ng-bind-template指令
這個指令跟ng-bind 差不多
ng-bind是指替換元素的textContent爲ng-bind的值
ng-bind-template是指替換元素的textContent的值爲ng-bind-template經過angular.parse().assign的內容;

14、ng-cloak
ng-cloak也可以爲我們解決FOUC。 ng-cloak會將內部元素隱藏,直到路由調用對應的頁面。

FOUC :文檔樣式短暫失效
如果使用import方法對CSS進行導入,
會導致某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:
以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content)
存在完全是爲了用戶體驗,
如果一個html界面angular.js還沒加載進來,
那麼界面會有{{}}這樣的標誌,如果{{}}標誌多了,用戶會一臉矇蔽 啊,
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:item, first : 如果item爲第一個,那麼firsttrue, middle : 如果item不是開頭,不是結尾middletrue, last : 如果item是最後一個, lasttrue, even : 如果索引爲偶數, 那麼eventrue,false odd : 同上, 索引爲奇數$odd爲true….;
      18、ng-href
      起初我在一個文本域中弄了個ng-model,然後像這樣在href裏面寫了進去。

19、ng-src
大同小異,即表達式生效前不要加載該資源。
界面加載的時候纔不管img的標籤src有什麼
都會一併加載
如果圖片的src包含了{{**}}這些字符
瀏覽器不會管這是什麼東西
在渲染dom樹的時候
會直接請求這個地址
如果想通過{{**}}動態生成img標籤的src,不要用src,要用ng-src

20、ng-class
用作用域中的對象動態改變類樣式, 通過一個表達式 來判斷什麼情況下 用什麼樣式

21、ng-click
點擊事件
ng-click=event()
$scope.event=function(){}

22、ngKeyup
鍵盤事件

23、ngKeydown
鍵盤事件

24、ngKeypress
鍵盤事件

25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup
鼠標事件

26、ngTrim
去除左右空格

27、ngInclude
ng-include指令是指這個指令標籤的innerHTML爲指定的url
這個url爲相對與當前目錄的url地址或者絕對地址
angular會通過ajax請求該地址
然後把地址的內容作爲指令元素innerHTML填充;

28、ngIist
ng-list這個指令要和ng-model合起來用
ng-list在輸入框的表現通過split(“,”)的數組纔是實際的model
ng-list默認爲”,”逗號
要設置成自定義的區分符,直接爲ng-list賦值即可;

29、ngPattren
匹配這個輸入框的輸入值是否符合這個正則,如果不匹配,這個元素會被加上ng-invalid的class, 如果匹配會被加上ng-valid的class

30、ng-paste ng-copy ng-cut
他們是一夥的,如果輸入框的值是粘帖的,那麼ng-paste就爲真, ng-copy,ng-cut也是同理

31、ng-non-bindable
ng-non-bindable指令指該元素的內部{{**}}不被綁定和轉義,不受angular的掌控:

32、ng-open
這個我也認爲和ng-open, ng-hide差不多, 區別是ng-open只能綁定details元素,(details標籤目前只有webkit瀏覽器支持)
當ng-open的值爲open那麼綁定的details內部的summary元素就顯示

33、input裏的一些屬性
ngMinLength,,ngMaxLength,ng-parttern,通過正則判斷input是否匹配,ngChange,
ng-vlaue就只是設置值而已 不雙向綁定數據

轉自 http://blog.csdn.net/qq_35759390/article/details/65446049

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章