AngularJS学习笔记（四）内置指令
说说指令
不得不赞叹，指令是ng最为强大的功能之一，好吧，也可以去掉之一，是最强大的功能。ng内置了许多自定义的指令，这避免了我们自己去造轮子。同时，ng也提供了自定义指令的功能，可以让我们的页面元素标签更加实例化。
内置的指令很多，至少40-50个吧。我们在学习的时候，有两种思路，一种是先作题，遇到不会的就去问；还有一种就是先把书都看了，然后再做题。这儿呢，我们就先介绍大概的类别，至于细节指令，我们线下自我修行吧。
1.必须要会的指令
（1）ng-app
一个页面仅能有第一个ng-app起作用，所以页面最好是将ng-app写到html根元素上，这样所有的元素就都归ng管啦。
（2）ng-controller
一个页面可以有多个ng-controller，有一个Controller，也就意味着多了一个隔离区域。一般来说，Controller负责通过服务进行CRUD操作，并将数据或结果绑定在Controller的$scope上。
（3）ng-model
我们在上一篇也见过这个指令，<input type=’textbox’ ng-model=’name’ />，此处的含义是：将Controller中$scope的name绑定到此元素上，如果此元素内容变化，则必然会修改$scope.name的值
（4）{{}}和ng-bind
这俩指令功能类似，都是将Controller中$scope上的值（例如name）绑定到显示元素上的。
两者的区别是：如果使用{{}}，页面在加载的瞬间，用户有可能会看到尚未绑定数据的源码状态，而ng-bind则不存在此问题。不过不必因此困扰，用哪个都可以，也就是那么一瞬间吗。
hello,{{name}} <hr> hello,<span ng-bind='name'></span>
2.样式相关的指令
（1）ng-class
ng-class可以设置为{key:value}对象，当value为真时，key所对应的样式启作用。
<!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.isbk=false; $scope.isft=false; }); </script> <style type='text/css'> .bkcolor { background-color:green; } .ftcolor { color:red; } </style> </head> <body> <div ng-controller ="ctrl"> <input type='checkbox' ng-model='isbk' />使用background <input type='checkbox' ng-model='isft'/>使用frontcolor <div ng-class='{bkcolor:isbk, ftcolor:isft}'> 测试 </div> </div> </body> </html>查看效果：
点击这里测试运行效果。
（2）ng-class-even,ng-class-odd
这两个指令和ng-class类似，不过特殊之处是需要配合ng-repeat使用，代码如下：
<!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.personList = [{ name:"张三", age:30 },{ name:"李四", age:40 },{ name:"王五", age:50 }]; }); </script> <style type='text/css'> .oddcolor { background-color:green; } .evencolor { background-color:red; } </style> </head> <body> <div ng-controller ="ctrl"> <table> <tr ng-repeat='person in personList' > <td>{{$index}}</td> <!--注意：此处为字符串--> <td ng-class-odd="'oddcolor'" ng-class-even="'evencolor'">{{person.name}}</td> <td ng-class-odd="'oddcolor'" ng-class-even="'evencolor'">{{person.age}}</td> </tr> </table> </div> </body> </html>显示效果：
点击这里查看效果。
（3）ng-style
只需给ng-style赋值给style的对象就ok，见代码：
<!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.style={color:'red'}; }); </script> </head> <body> <div ng-controller ="ctrl"> <div ng-style='style'> 测试 </div> </div> </body> </html>效果：
点击这里查看效果。
（4）ng-show/ng-hide
这是两个常用的指令，对应的值为true或false。当为true的时候，对应的指令生效，对应的css是display: block和display:none。
<!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.isshow = false; }); </script> </head> <body> <div ng-controller ="ctrl"> <input type="checkbox" ng-model="isshow"/>显示 <div ng-show="isshow"> 显示的内容。 </div> </div> </body> </html>运行效果：
点击这里查看效果。
3.表单指令
既然是表单指令，自然是指input、select、form等指令，还包括一些表单元素的状态指令。下面这个例子介绍一个登陆窗口，当用户名或密码为空时进行提示，并登录按钮不可用。
这其中要用到input指令和form指令，我们需要参考AngularJS的API使用这些指令的属性，下面来看例子吧。
<!DOCTYPE html> <html ng-app="App"> <head> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/bootstrap.css"> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.loginInfo = { name: "", pwd: "" }; $scope.login = function () { alert("登陆名：" + $scope.loginInfo.name + "\n登陆密码：" + $scope.loginInfo.pwd + "\n执行登陆验证！"); } }); </script> </head> <body style='padding-top:10px;'> <div class='container' ng-controller="ctrl"> <!--form需有name属性--> <form name='loginform' class="form-horizontal"> <div ng-class="{'form-group':true,'has-success':loginform.username.$valid,'has-error':!loginform.username.$valid}"> <label class='col-md-2 control-label'>登陆名：</label> <div class='col-md-7'> <!--input元素需有name属性，注意：name属性和ng-model绑定 --> <!--此处使用了 required、minlength、maxlength属性 --> <input type="text" class="form-control" name='username' ng-model='loginInfo.name' required ng-minlength="3" ng-maxlength="10"> </div> <!--注意：此处使用的是form的name属性和input元素的name属性 --> <label class='col-md-3 control-label'> <span ng-show='loginform.username.$error.required'> 登陆名不能为空。 </span> <span ng-show="loginform.username.$error.minlength"> 登录名不能小于3个字符 </span> <span ng-show="loginform.username.$error.maxlength"> 登录名不能大于10个字符 </span> </label> </div> <div ng-class="{'form-group':true,'has-success':loginform.userpwd.$valid,'has-error':!loginform.userpwd.$valid}"> <label class='col-md-2 control-label'>密码：</label> <div class='col-md-7'> <input type="password" class="form-control" name='userpwd' ng-model='loginInfo.pwd' required> </div> <label class='col-md-3 control-label' ng-show="loginform.userpwd.$error.required"> 密码不能为空。 </label> </div> <div class="form-group"> <div class='col-md-offset-2 col-md-10'> <!--注意：此处使用ng-submit和ng-disabled--> <input type="submit" class='btn btn-primary' value="登录" ng-click="login();" ng-disabled="!loginform.$valid" /> <button class='btn btn-danger'> 取消 </button> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> loginform.username.$valid = {{loginform.username.$valid}} </div> <div class="col-md-offset-2 col-md-10"> loginform.username.$error = {{loginform.username.$error}} </div> <div class="col-md-offset-2 col-md-10"> loginform.$valid = {{loginform.$valid}} </div> <div class="col-md-offset-2 col-md-10"> loginform.$error = {{loginform.$error}} </div> </div> </form> </div> </body> </html>看看效果：
点击这里查看效果。表单指令较多，此处简单介绍一般常用指令，深入的和其他的让我们线下自己学习吧。
4.逻辑指令
（1）ng-repeat
ngRepeat指令为集合中的每项实例化一个模板。每个模板的实例拥有自己的域，使用循环变量指向当前集合项上，$index指向当前项的索引或键值。它有一些常用的属性：$index、$first、$middle、$last、$odd、$even。<!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.personList = [{ name:"张三", age:30 },{ name:"李四", age:40 },{ name:"王五", age:50 }]; }); </script> </head> <body> <div ng-controller ="ctrl"> <ul> <li ng-repeat='person in personList'> 姓名：{{person.name}},年龄：<span ng-bind='person.age'></span> </li> </ul> </div> </body> </html>运行效果：
点击这里查看。
（2）ng-if
ngIf指令基于{表达式}来移除或重建DOM树的一部分。如果赋给ngIf的表达式计算结果为假，元素会从DOM移除，其它情况会复制一份元素插入到DOM中。查看效果：
点击这里查看效果。
乍一看，这效果和上面那个ng-show和ng-hide有点相似么。确实，从图片效果看，却是如此，但是ng-show和ng-hide只是将display属性设置为block或null，而ng-if则是将该dom元素移除或增加上的，具体看下图：
（3）ng-switch
ngSwitch指令用于根据域表达式在你的模板上按条件切换DOM结构。查看代码：
<!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script> <script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.switchValue = 1; }); </script> </head> <body> <div ng-controller ="ctrl"> <input type='radio' value='1' ng-model='switchValue' />1 <input type='radio' value='2' ng-model='switchValue' />2 <input type='radio' value='3' ng-model='switchValue' />3 <input type='radio' value='4' ng-model='switchValue' />4 <div> 选择的值 {{switchValue}} </div> <div ng-switch="switchValue"> <div ng-switch-when='1'> 我的值是1 </div> <div ng-switch-when='2'> 我的值是2 </div> <div ng-switch-when='3'> 我的值是3 </div> <div ng-switch-default> 我是default </div> </div> </div> </body> </html>查看效果：
在上图，我们也可以看到，随着选择值的不同，ng-switch也在不停的增删dom。点击这里查看效果。
5.事件指令
事件指令也是一个大家族呀，常用的有这些呀：ng-change、ng-dblclick、ng-mousedown、ng-mouseenter、ng-mouseleave、ng-mousemove、ng-mouseover、ng-mouseup、ng-submit啊。
不过只是对常用的事件做了封装，很好使用，上面的例子中用到了ng-click，小伙伴，你可get到了，这儿就不写例子啦。
小结
指令的内容真的非常多，非常多，这篇文章看到这儿，你应该已经大致了解了内置指令的应用，像开头说的，以后你用到哪个指令，就好好的学习哪个指令吧。
