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到了，这儿就不写例子啦。

小结

指令的内容真的非常多，非常多，这篇文章看到这儿，你应该已经大致了解了内置指令的应用，像开头说的，以后你用到哪个指令，就好好的学习哪个指令吧。