AngularJS表单提交
AngularJS form submission
我有一个表格来收集用户的注册详细信息,定义如下:
<form class="m-t-xl" ng-submit="signup(user)" novalidate>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required="" ng-model="user.name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required="" ng-model="user.email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company" required="" ng-model="user.company">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password">
</div>
<div class="form-group">
<div class="checkbox i-checks"><label> <input type="checkbox"><i></i> Agree the terms and policy </label></div>
</div>
<button type="submit" class="btn btn-primary block full-width m-b">Register</button>
<p class="text-muted text-center"><small>Already have an account?</small></p>
<a ui-sref="login" class="btn btn-sm btn-white btn-block">Login</a>
</form>
出于某种原因,当我点击提交按钮时,什么都没有发生。按钮坏了。我的控制器有以下代码:
.controller('registerCtrl', ['$scope', '$state', 'Registration',
function($state, $scope, Registration) {
$scope.user = {
name: '',
email: '',
company: '',
password: ''
};
console.log('controller getting loaded');
$scope.signup = function(user) {
console.log('register getting called');
}
}]);
它的作用就好像表单无法识别"注册"方法一样。以类似的方式,我用实现了一个登录表单
<form class="m-t" ng-submit="login(credentials)" novalidate>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required="" ng-model="credentials.email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="" ng-model="credentials.password">
</div>
<button type="submit" class="btn btn-primary block full-width m-b">Login</button>
<a ui-sref="forgot_password"><small>Forgot password?</small></a>
<p class="text-muted text-center"><small>Do not have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" ui-sref="register">Create an account</a>
</form>
和:
.controller('loginCtrl', ['$scope', '$rootScope', '$state', 'Authentication', 'AUTH_EVENTS',
function($scope, $rootScope, $state, Authentication, AUTH_EVENTS) {
$scope.credentials = {
email: '',
password: ''
};
$scope.login = function(credentials) {
Authentication.login(credentials).then(function(user) {
$rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
$scope.setCurrentUser(user);
$state.go('events');
}, function () {
$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
});
}
}]);
第二种形式正在按预期工作。。。我不知道发生了什么。我想说的是,我记录了registerCtrl,它正在正确加载到页面中,但该方法在调用时什么都不做。
有什么其他可能导致这种情况的想法吗?我检查了SO上已经存在的所有解决方案,但似乎没有任何帮助。
在我的config.js中,两个路由的声明类似:
.state('login', {
url: "/login",
templateUrl: "views/login.html",
data: { pageTitle: 'Login', specialClass: 'gray-bg' }
})
.state('register', {
url: "/register",
templateUrl: "views/register.html",
data: { pageTitle: 'Register', specialClass: 'gray-bg' }
})
我还尝试更改我的表单,在调用相同方法的"注册"按钮上单击ng,但这有相同的行为。
谢谢!
在"registerCtrl"控制器中,$scope和$state混合:
.controller('registerCtrl', ['$scope', '$state', 'Registration',
function($state, $scope, Registration) {}]);
应该是:
.controller('registerCtrl', ['$scope', '$state', 'Registration',
function($scope, $state, Registration) {}]);
我认为问题是您将用户对象和登录功能分配给了错误的应用程序对象。
相关文章:
- angularjs-控制器在表单提交时未调用
- AngularJS JQuery Ajax表单提交等效
- AngularJS:表单提交没有返回JSON中的值
- AngularJS:在异步验证器完成之前阻止表单提交
- Angularjs - 简单的表单提交
- AngularJs 引导如何在表单提交后获取评级值
- 在 Angularjs 验证为真后,进行普通表单提交
- AngularJS表单提交和重定向
- 使用angularJs中的嵌套表单进行表单提交行为
- angularjs表单提交的数据为空
- 提交Ajax表单的AngularJS需要点击两次
- AngularJS表单提交
- 如何在Angularjs中访问表单提交的数据
- 模拟Tab键按下回车键和按钮元素触发表单提交angularjs
- angularJs:无法看到表单提交中的数据
- AngularJS表单提交不工作
- 在angularjs的表单验证中,表单提交前显示错误信息
- AngularJS -表单提交
- 如果图片太大,禁用angularjs表单提交按钮
- AngularJS上传照片没有表单提交