Question

我是angularjs的新手。我在过去24小时内遇到了一个问题，并没有得到任何线索。基本上我有一个简单的提交表单，在部分视图html中。当用户点击index.html上的注册链接时，会出现此部分视图。问题是，当我按下提交按钮时，它不会转到提到的控制器，而是提供以下消息： -

Cannot GET /signup?username=myusername&password=mypassword&login=Sign+in

但是当我在index.html中粘贴相同的部分html代码时，它可以正常运行到附加的控制器并打印警告语句。我不知道为什么会这样。有人可以帮助我理解，它的真正原因是什么????

的index.html：

<!-- public/index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">

    <title>My Cart</title>




    <!-- JS -->

    <script src="libs/jquery/dist/jquery-2.1.1.js"></script>
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap-modal.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/UserCtrl.js"></script>
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/controllers/MenuCtrl.js"></script>
    <script src="js/controllers/AddCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/controllers/GeekCtrl.js"></script>
    <script src="js/services/GeekService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>

    <!-- CSS-->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
    <link href="css/demo.css" rel="stylesheet">
    <link href="css/yamm.css" rel="stylesheet">
    <!-- Include jQuery Popup Overlay -->
  <script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>


</head>

 <body ng-app="sampleApp" ng-controller="NerdController">

    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="/nerds">Home</a></li>
            <li><a href="/geeks">How it works</a></li>
            <li><a href="/geeks">Service Area</a></li>
            <li><a href="/geeks">Feedback</a></li>
        </ul>



        <ul class="nav navbar-nav navbar-right">
                  <li><a href="/signup">Sign Up</a></li>
                  <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown">Member Login <b class="caret"></b></a>
                     <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
                        <li>
                           <div class="row">
                              <div class="col-md-12">
                                 <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                    <div class="form-group">
                                       <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                       <input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Email address" required>
                                    </div>
                                    <div class="form-group">
                                       <label class="sr-only" for="exampleInputPassword2">Password</label>
                                       <input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password" required>
                                    </div>

                                    <div class="form-group">
                                       <button type="submit" class="btn btn-success btn-sm">Sign in</button>
                                       <a href="#">Forgot password?</a>
                                    </div>

                                 </form>
                              </div>
                           </div>
                        </li>

                     </ul>
                  </li>
         </ul>
      </div>
    </nav>


    <div class="container">
        <!-- ANGULAR DYNAMIC CONTENT -->

        <div class="container">
            <div ng-view>
            </div>
        </div>
    </div>

</body>
</html>

和部分视图：signup.html

<div ng-controller="AddController">
            <form data-title="Sign in" data-value="login" class="tab-pane" name="login">

                <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
                <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
                <input type="submit" name="login" value="Sign in" data-ng-click="submit(model)" />

            </form>
    </div>

控制器：AddCtrl.js

// public/js/controllers/NerdCtrl.js
angular.module('AddCtrl', []).controller('AddController', function($scope,$http) {

    $scope.formData = {};

    $scope.submit = function(){
        alert('Add Ctrl');
      };

});

Answer 1

我相信Angular无法为你的html找到控制器。

原因可能是你的声明

angular.module('AddCtrl', [])

这会创建一个新模块AddCtrl。你想要每个控制器的模块吗？

还将模块AddCtrl注册为对邮件模块的依赖。

还要确保未多次声明angular.module('AddCtrl', [])。此语法创建模块。要检索模块，请使用angular.module('AddCtrl')

提交表单不适用于部分视图AngularJs

1 个答案: