Question

我是AngularJS的新手，我正在研究一个项目。我刚创建了一个登录表单，创建了一个模块和一个控制器。但控制器工作不正常。

以下是视图的代码。

<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script> 
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
    <div class="container">
        <div class="logo"> <a href="#"><img src="images/logo.png" /></a> </div>
        <!--logo end--> 
    </div>
</header>
<section class="page-wrap">
    <div class="container">
    <form class="form-horizontal login-form" role="form">
    <h2>Sign in to your account</h2>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required />  {{email}}
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
        </div> 
      </div>
    </form>


    </div>
</section>

</body>
</html>

现在我在这里创建模块和控制器，但效果不佳。

var loginApp = angular.module('loginApp', []);

loginApp.controller('LoginAppController', function ($scope) {

    $scope.Click = function (name) {
        alert("Email: " + $scope.email + ", Password: " + $scope.password);
    }

}

我在视图中提供了ng-app="loginApp"并ng-controller="LoginAppController" 但它没有正常工作。请帮我解决一下。提前谢谢。

Answer 1

只需进行以下更改

 $scope.Click = function() 
       {
         //your logic
        }

Answer 2

试试这个。将表单标记更改为

<form class="form-horizontal login-form" role="form" ng-submit="Click()">

您的提交按钮

<button type="submit" class="btn btn-default red">Sign in</button>

在您的控制器中，您忘记在控制器的末尾添加)

loginApp.controller('LoginAppController', function ($scope) {

    $scope.Click = function () {
        alert("Email: " + $scope.email + ", Password: " + $scope.password);
    }

});

控制器在AngularJS中不起作用

2 个答案: