Angular内置指令

记录一下工作中使用到的一些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