AngularJs 內置指令


  林炳文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

去除左右空格


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM