3.5 控制器中处理DOM事件

AngularJS应用中的DOM事件处理可以在控制器中完成。AngularJS框架为我们提供了一系列的事件绑定指令，这些指令是在原生的JavaScript事件名称前增加“ng-”前缀，例如ng-click、ng-keyup等。

下面就以一个案例来说明如何在控制器中处理浏览器DOM事件，完整代码如下：

代码清单：ch03\ch03_03.html

        <!doctype html>
        <html ng-app="app">
        <head>
            <meta charset="UTF-8">
            <title>ch03_03</title>
            <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body>
        <div class="container" ng-controller="LoginController">
          <div class="login-title text-center">
                <h1><small>登录</small></h1>
          </div>
          <div class="form">
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" ng-model="uname" class="form-control"
                                placeholder="用户名">
                    </div>
                </div>
            </div><br/><br/>
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                        </span>
                        <input type="text" ng-model="pword" class="form-control"
                                placeholder="密码">
                    </div>
                </div>
            </div><br/><br/>
            <div class="form-group form-actions">
                <div class="col-xs-4 col-xs-offset-4 ">
                    <button ng-click="login()" type="submit" class="btn btn-sm btn-info">
                        <span class="glyphicon glyphicon-log-in"> </span>
                          登录
                    </button>
                    <button type="reset" class="btn btn-sm btn-info">
                        <span class="glyphicon glyphicon-off"> </span>
                        重置
                    </button>
                </div>
            </div>
        </div>
        </div>
        <script>
            function LoginController（$scope）{
                $scope.login = function(){
                    if（$scope.uname == "admin"
                      && $scope.pword == "admin"）{
                        alert（"登录成功！"）;
                    } else {
                        alert（"用户名密码错误，请检查！"）;
                    }
                }
            }
            var app = angular.module（"app", []）;
            app.controller（"LoginController", LoginController）;
        </script>
        </body>
        </html>

如上面的代码所示，我们在“登录”按钮上使用ng-click指令对按钮单击事件进行事件绑定，然后在LoginController控制器构造方法的$scope作用域中增加事件响应方法login()，当用户单击“登录”按钮时就会调用login()方法进行业务逻辑处理。

在浏览器中运行ch03_03.html，如图3.3所示，输入正确的用户名和密码（均为admin）时提示登录成功，否则提示登录失败。

图3.3 控制器中的事件处理案例

上一章目录下一章