【发布时间】: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