【问题标题】:Submit Form is not working from partial view AngularJs从部分视图AngularJs提交表单不起作用
【发布时间】:2014-10-20 15:00:49
【问题描述】:

我是 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');
      };

});

【问题讨论】:

    标签: angularjs forms post submit partial


    【解决方案1】:

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

    原因可能是你的声明

    angular.module('AddCtrl', [])

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

    还有模块 AddCtrl 注册为邮件模块的依赖项。

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

    【讨论】:

    • 我还在依赖中添加“AddCtrl”模块。让我在这里粘贴 app.js 代码:- angular.module('sampleApp', ['ngRoute', 'appRoutes','MenuCtrl','UserCtrl','AddCtrl','NerdCtrl']);但这个问题仍然存在。事实上,如果我将提交功能放在任何其他现有控制器中,它在部分 html 中不起作用。但是从 index.html 中可以识别出来...不确定是什么问题
    猜你喜欢
    • 1970-01-01
    • 2017-02-21
    • 2017-05-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多