ng提交未执行
ng-submit is not executed
我有以下形式:
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
这很简单。
现在我有以下控制器代码:
userModule.controller('UserController', ['$http', '$scope', function($http, $scope) {
this.user = {
username: "",
password: ""
};
$scope.test = function() {
alert($scope.user);
}
}]);
现在,当我尝试提交表单时,test
函数永远不会被调用。
有人能告诉我为什么吗?
更新我的代码
userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
var vm = this;
vm.user =
{
username: "",
password: ""
};
vm.test = function()
{
alert(vm.user);
}
}]);
表单
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
完整代码
用户模块
/***根于2015年12月2日创建。*/
(function () {
var userModule = angular.module('user', []);
userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
var vm = this;
vm.user =
{
username: "",
password: ""
};
vm.test = function()
{
alert(vm.user);
}
}]);
userModule.controller('LoginController', function()
{
this.password_form = {};
this.state = 'login';
this.setState = function(value)
{
this.state = value;
};
this.checkState = function(value)
{
return value == this.state;
}
})
})();
完整html视图
<span ng-controller="LoginController as loginCtrl">
<section class="panel panel-default bg-white m-t-lg animated fadeInDownBig" id="login_section" ng-show="loginCtrl.checkState('login');"
xmlns="http://www.w3.org/1999/html">
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
<p class="text-muted text-center wrapper-lg">
<small>
<a href="" ng-click="loginCtrl.setState('order')" id="order_demo">Er du endnu ikke bruger af <span class="text-lb">Learningbank</span>? Tryk her
og få en gratis demo</a>
</small>
</p>
<div class="line line-dashed"></div>
<p class="text-muted text-center">
<small><a href="" id="forgot_password" ng-click="loginCtrl.setState('password');">Glemt kodeord?</a></small>
</p>
</section>
<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_retrieve" ng-show="loginCtrl.checkState('password')">
<section class="panel-heading">
<h3 class="h3">Glemt dit kodeord?</h3>
<p class="text text-muted">Indtast din mail adresse og få tilsendt en ny</p>
</section>
<form method="POST" class="panel-body wrapper-lg" action="/Users/retrieve_password">
<div class="form-group">
<label class="control-label">E-mail</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail" ng-model="notificationCtrl.mail" ng-required="">
</div>
<button ng-click="loginCtrl.setState('login')" id="btn_back" type="button" class="btn btn-default"><i class="fa fa-arrow-left"></i> Tilbage</button>
<input type="submit" class="btn btn-primary pull-right" value="Send">
</form>
</section>
<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_demo" ng-show="loginCtrl.checkState('order');">
<section class="panel-heading">
<h3 class="h3">Bestil en gratis demo</h3>
<p class="text text-muted">Udfyld nedenstående formular og få en gratis demo</p>
</section>
<form method="POST" name="demo" class="panel-body wrapper-lg" action="/Users/contact" data-parsley-validate>
<div class="form-group">
<label for="txt_email" class="control-label">E-mail *</label>
<input type="email" class="form-control input-lg" id="txt_email" name="email" placeholder="E-mail"
data-parsley-trigger="change" required/>
</div>
<div class="form-group">
<label for="txt_fornavn" class="control-label">Fornavn *</label>
<input type="text" class="form-control input-lg" id="txt_fornavn" name="fornavn" placeholder="Fornavn"
data-parsley-trigger="change" required/>
</div>
<div class="form-group">
<label for="txt_efternavn" class="control-label">Efternavn</label>
<input type="text" class="form-control input-lg" id="txt_efternavn" name="efternavn"
placeholder="Efternavn">
</div>
<div class="form-group">
<label for="txt_telefon" class="control-label">Telefon</label>
<input type="text" class="form-control input-lg" id="txt_telefon" name="phone" placeholder="Telefon">
</div>
<div class="form-group">
<label for="txt_virksomhed" class="control-label">Virksomhed *</label>
<input type="text" class="form-control input-lg" id="txt_virksomhed" name="company" placeholder="Virksomhed"
data-parsley-trigger="change" required/>
<small>* påkrævet</small>
<br>
</div>
<button id="btn_back_demo" type="button" class="btn btn-default" ng-click="loginCtrl.setState('login')"><i class="fa fa-arrow-left"></i>Tilbage
</button>
<input type="submit" class="btn btn-primary pull-right" value="Send">
</form>
</section>
<section class="panel panel-default bg-learning padder padder-v m-t-lg animated fadeInDownBig text-center">
<p class="font-semibold">
Velkommen til Learningbank
<br/>
"Dit personlige læringsmiljø"
</p>
<span style="font-size: 12px; margin-bottom: 5px;">Vil du vide mere om Learningbank, kan du se mere <a
href="http://www.learningbank.dk/" target="_blank" class="font-semibold"
style="text-decoration: underline; color:#fff;">her</a></span>
<span style="font-size: 12px;">PLE - Personal Learning Environment</span>
</section>
</span>
因为使用控制器作为语法,所以需要将测试函数绑定到它,而不是绑定到$scope。
然而,我建议做一些类似的事情
var vm = this;
在第一行。然后函数变为:
vm.test = function() {
alert(vm.user);
}
请参阅https://github.com/johnpapa/angularjs-styleguide#controllers了解更多详细信息。强烈建议阅读该指南。
对于HTML:无需使用"userCtrl",您已将控制器绑定到表单。
对于JS:你写的是这个.user。但它应该是$scope.user
它将工作
相关文章:
- HTML表单提交时未执行外部函数
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- javascript下载一个文件并执行提交操作
- HTML表单-按'时执行脚本;输入',无需提交
- 将JavaScript函数分配给提交按钮,该按钮应有条件执行
- 在表单同步提交后执行 js 吗?
- 表单的“操作”和“提交”:哪个先执行
- “表单操作”和“点击时提交表单”都将执行
- 如何在节点的沙盒环境中执行用户提交的javascript代码
- 带有远程 => true 的 Rails 表单提交 -- JS 文件呈现但不执行
- 如何在Safari提交表单之前执行JQuery
- JQuery/JavaScript:遍历表单字段,执行计算,然后提交
- 未执行Ajax隐藏表单提交验证
- 带有两个提交按钮的提交表单,每个按钮执行不同的操作问题
- Rails 5提交表单后在页面加载时执行javascript
- 保证HTML表单提交和jQuery onclick的执行顺序
- asp.net mvc 服务器是否可以查看在父级执行提交时动态创建的控件
- 在控制器方法返回值之前,首先执行提交按钮的单击事件
- 警告框没有停止表单的执行/提交
- 使用按钮而不执行提交操作