Angular内置指令
2015-08-24 21:25
615 查看
记录一下工作中使用到的一些AngularJS内置指令
内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突1. ng-model
使用ng-model实现双向绑定,通过表单的与当前作用域进行绑定<input ng-model="greeting"> <p>Hello {{greeting || "World"}}</p>
那么此时,input框中输入什么, <p>标签中就会随时更新
除此之外,ng-model是可以用到任意一个标签中的,只是用到其他标签的时候,当前作用域的值,是要另外赋值,而不能像input框一样输入
2. ng-init
我们一般使用这个指令来在Controller中初始化作用域,这里的init()会在对应的Controller中定义<form ng-init="init()"> ... </form>
3. ng-submit
点击表单提交的时候会触发该指令,doIt()这个方法会在对应的Controller中取定义<form ng-submit = "doIt()"> ... <input type="submit" value="提交" /> </form>
4. ng-show/ng-hide
根据ng-show/ng-hide后面的所跟的表达式来显示或隐藏标签,经常通过Controller作用域变量的变化来控制标签的显示与隐藏<div ng-show="isShow"> ... </div> <div ng-hide="1+1=2"> ... </div>
5. ng-change
结合ng-model使用,ng-model中的变量发生变换则触发该指令<input type="text" ng-model="calc.arg" ng-change="calc.result = calc.arg*2" /> <code>{{ calc.result }}</code>
6. ng-bind
ng-bind是单向绑定,用于展示数据的,只能通过$scope去控制数据,然后展示在view中,而ng-model是双向绑定,用于控制数据,$scope或view中的变化都能互相影响
<input ng-model="object.xxx"> <span ng-bind="object.xxx"></span>
ng-bind就相当于{{object.xxx}},展示在当前视图中
7. ng-options
一般与select标签一起使用,直接看代码,animals是作用域中的变量,将会在对应的Controller中定义<select ng-model="seleted" ng-options="a.name for a in animals"> <option value="">请选择你的萌宠</option> </select>
8. ng-repeat
遍历集合,生成对应的模板实例,一般与ul,li标签一起使用,使用方式类似ng-options<ul> <li class="menuitem" ng-repeat="item in menuListItem" > <div class="{{item.icoClass}}"><i class="pointmenu_1" ng-show="{{item.pointm}}"></i></div> <a name="{{item.pName}}">{{item.menuName.con}} <span>{{item.menuName.describe}}</span> </a> </li> </ul>
9. ng-class
在Angular中要改变一个标签的class,最常见的就是通过在Controller scope中定义某变量来改变classfunction ctrl($scope) { $scope.test = "tips" } <div class="{{tips}}"> ... </div>
这也是我经常使用的方式,但后来认识到Controller中,要尽量少的设计DOM元素上的操作后,开始尝试使用ng-class
function Ctr($scope) { $scope.isActive = true; } <div ng-class="{true: 'active', false: 'inactive'}[isActive]"> </div>
isActive为true时,class为active,false时为inactive
function Ctr($scope) { $scope.isSelected = 'true'; } <div ng-class {'selected': isSelected, 'car': isCar}"> </div>
isSelected 为true时,class为selected, isCar为true时为,class为car
相关文章推荐
- ionic + angularJS $ionicHistory接口文档
- 你知道用AngularJs怎么定义指令吗?
- angularjs 使用uploadify出现的问题总结
- angularjs Scopes
- 用angular来思考问题How do I “think in AngularJS” if I have a jQuery background?
- AngularJs $broadcast $emit $on 事件触发controller间的值传递
- AngularJS入门教程07:路由与多视图
- AngularJS入门教程06:链接与图片模板
- AngularJS入门教程05:XHR和依赖注入
- AngularJS入门教程04:双向绑定
- AngularJS入门教程03:迭代器
- AngularJS入门教程02:AngularJS模板
- AngularJS入门教程01:静态模板
- AngularJS入门教程00:引导程序
- AngularJS中文入门教程
- [Angularjs]过滤器
- 从0开始学angularjs-笔记02
- AngularJS第一篇 ------------- 我的第一个demo
- AngularJS - 路由 routing 基础示例
- angularJs自定义指令时的绑定