angularjs 在表单标签中声明 ng-app 和 ng-controller 时表单无法正常工作

Question

当我声明 ng-app 和 ng-controller 时，表单不进行验证。

如果我删除它们，那么表单会进行基本验证，但我想使用控制器逻辑来执行用户名和密码验证和路由，我不能使用它（因为 ng-controller 已被删除）。

我错过了什么？

<html ng-app>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript"> 
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
  <script>


<script>
var app = angular.module('myapp', []);
app.controller('loginCtrl', function($scope, $location){
$scope.loginCheck = function(){
var uname = $scope.user.name;
var pwd = $scope.user.password;
if ( uname == 'admin' && pwd =='admin123'){
window.location.hash='#/dashboard';
$location.path('/dashboard');
            }
            else $location.path('/about')
      };

});
</script>

<body>
    <h3  align="center">Loginn</h3>

        <form   name="form" class="login" ng-app='myapp' ng-controller = 'loginCtrl' >

<input placeholder="User Name"
       name="name" ng-model="user.name"  class="login-input" ng-model-options="{updateOn:'blur'}"
       required pattern=".{3,}" />
<div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
    We need a name with 3 chars or more.
</div>

<br>

<input placeholder="E-mail"
       name="email" ng-model="user.email" class="login-input"  ng-model-options="{updateOn:'blur'}"
       required type="email"  />
<div class="error-message"
     ng-show="form.email.$invalid && !form.email.$pristine">
    We need a valid e-mail address.
</div>

<br>

<input type="password" class="login-input"  ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />

<input type="password" class="login-input"  ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
    <span>Password mismatched</span>
</div>

<br>

 <input type="submit"   value ="Submit "  ng-click="loginCheck()" ng-disabled="form.$invalid"/>

</form>



</body>

如何 add/specify 这种形式的 ng-controller 和 ng-app？

Answer 1

你的应用有很多问题:

第一行：<html ng-app>

删除ng-app，如评论中所述，您只能有一个ng-app标签

2 <script> 连续：

这里：

<script>
<script>
var app = angular.module('myapp', []);

JQuery应该在angular之前插入，并且应该这样插入：

这里：

<script src='//code.jquery.com/jquery-latest.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

请在下面找到一个工作示例：

<html>

<head>
  <title>My Angular App</title>
  <script src='//code.jquery.com/jquery-latest.min.js'></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

  <script>
    var app = angular.module('myapp', []);
    app.controller('loginCtrl', function($scope, $location) {
      $scope.loginCheck = function() {
        var uname = $scope.user.name;
        var pwd = $scope.user.password;
        if (uname == 'admin' && pwd == 'admin123') {
          window.location.hash = '#/dashboard';
          $location.path('/dashboard');
        } else {
          $location.path('/about');
        }
      };
    });
  </script>
</head>

<body ng-app="myapp" ng-controller="loginCtrl">
  <form name="form" class="login">

    <input placeholder="User Name" name="name" ng-model="user.name" class="login-input" ng-model-options="{updateOn:'blur'}" required pattern=".{3,}" />
    <div class="error-message" ng-show="form.name.$invalid && !form.name.$pristine">
      We need a name with 3 chars or more.
    </div>


    <input placeholder="E-mail" name="email" ng-model="user.email" class="login-input" ng-model-options="{updateOn:'blur'}" required type="email" />
    <div class="error-message" ng-show="form.email.$invalid && !form.email.$pristine">
      We need a valid e-mail address.
    </div>


    <input type="password" class="login-input" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
    <span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span>
    <br />

    <input type="password" class="login-input" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="6" ng-maxlength="15" title="6 to 15 characters" />
    <span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
    <span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
    <div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
      <span>Password mismatched</span>
    </div>
  </form>
</body>

angularjs 在表单标签中声明 ng-app 和 ng-controller 时表单无法正常工作

angularjs form not working when ng-app and ng-controller is declared in form tag

angularjs

ng-controller

ng-app