angularjs常用指令

最新推荐文章于 2025-08-08 14:20:26 发布

Leon

最新推荐文章于 2025-08-08 14:20:26 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web tech 文章标签： angularjs 指令 DOM html

本文链接：https://blog.youkuaiyun.com/rockwill/article/details/25964475

web tech 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了AngularJS中常用的指令，如ng-app用于定义Angular管理的页面范围，ng-controller用于指定控制器的作用域等。还详细解释了如何使用这些指令来实现数据绑定、条件渲染等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嵌入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>