记录一下工作中使用到的一些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中定义某变量来改变class
function 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