本文介绍了AngularJS中常用的指令，如ng-app用于定义Angular管理的页面范围，ng-controller用于指定控制器的作用域等。还详细解释了如何使用这些指令来实现数据绑定、条件渲染等功能。
嵌入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> |
扫一扫
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
