嵌入DOM的指令，以後再補充
|
指令 |
說明 |
舉例 |
|
ng-app |
angular管理頁面的範圍 |
<html ng-app=“MyApp”> … </html> |
|
ng-controller |
應用自定義controller的範圍 |
<div ng-controlller=”MyController”> {{myText}} </div> |
|
ng-model |
綁定表單控件 |
<input type=”checkbox” ng-model=”mySelected”/> |
|
ng-bind |
作用同{{}}，但angular加載未完成時可以在UI上隱藏 |
<div ng-controlller=”MyController” ng-bind=”myText”/> |
|
ng-change |
用戶修改輸入值時激發 |
<input ng-change=”computeValue()” ng-model=”myValue”/> |
|
ng-submit |
表單提交時執行 |
<form ng-submit=”preSubmit()” ng-controller=”formCtrl”> … </form> |
|
ng-click/ng-dbclick |
點按鈕時執行 |
<button ng-click=”reset()”>reset</button> |
|
ng-show/ng-hide |
表達式條件滿足時顯示/隱藏 |
<div ng-show=”isPrimary”> <a href=”#”>Show this link</a> </div> |
|
ng-class/ng-style |
動態設置css樣式 |
.error{…}//css class <!—根據isError是否應用 error --> <div ng-class=”{error:isError}”>…</div> |
|
ng-src |
解決<img>的並行加載問題 |
<img ng-src=”/img/{{photo}}”/> |
|
ng-href |
解決<a>的並行加載問題 |
<a ng-ref=”#/{{user}}”/> |
|
ng-repeat |
動態創建不定個數的DOM元素 |
<div ng-repeat=”item in items”> <h1>{{item.value}}</h1> </div> |
|
ng-view |
利用routeProvider的路由機制加載模板 |
<div ng-view/> |
|
ng-if |
根據表達式bool值刪除或創建DOM元素 |
<div ng-if=”hasElem”> … </div> |
|
ng-switch ng-switch-when |
根據ng-switch表達式的值選擇創建的分支 |
<div ng-switch=”animal”> <div ng-switch-when=”bird”>…</div> <div ng-switch-when=”dog”>…</div> <div ng-switch-when=”cat”>…</div> </div> |