Angular ng-submit 未触发所需的控制器方法 [英] Angular ng-submit not firing the desired controller method
问题描述
在 Angular 1.4.7 中，我试图在这个 plunk 中实现一个基本的登录表单 http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview(请点击 Home 路线上的红色Log into Dashboard 按钮).
但是由于某种原因，我无法在我的 loginCtrl 控制器代码中触发 login() 方法.
相反，它正在做的是使用作为表单变量传入的用户/密码参数的老式 URL 重定向.我不知道出了什么问题.
我发布的代码中的要点:
1) login-form.html 包含 ng-submit="login.loginUser()"
2) app.config 包含登录路径 'login'，它挂接到 'LoginCtrl as login'
3) 'LoginCtrl' 包含匿名方法 login.loginUser
4) 如果 userId 未定义，app.js 会重定向到我的 login 状态.
这是 login-form.html 模板:
<div ng-show="error" class="alert alert-danger">{{error}}</div><form name="form" ng-submit="login.loginUser()" role="form"><div class="form-group"><label for="username">用户名</label><i class="fa fa-key"></i><input type="text" name="username" id="username" class="form-control" ng-model="login.username" required/><span ng-show="form.username.$dirty &&form.username.$error.required" class="help-block">需要用户名</span><div class="form-group"><label for="password">密码</label><i class="fa fa-lock"></i><input type="password" name="password" id="password" class="form-control" ng-model="login.password" required/><span ng-show="form.password.$dirty &&form.password.$error.required" class="help-block">需要密码</span>
<div class="form-actions"><button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">登录</button>< IMG NG-如果= login.dataLoading" SRC =数据:图像/GIF; BASE64，R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh + QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa + dIAAAh + QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh + QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh + QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA =="/>
和我的登录控制器代码:
(function () {'使用严格';angular.module('rage').controller('LoginCtrl',['$rootScope', '$scope', '$cookies', '$modalInstance', '$q', 'datacontext', 'loginService', 'userService', 认证]);功能验证($rootScope，$scope，$cookies，$modalInstance，$q，datacontext，loginService，userService){var 登录 = 这个;login.loginUser = 函数 () {login.dataLoading = true;loginService.authUser(login.user, login.password);};}})();这是带有路由的 app.config:
angular.module('愤怒').config(config);功能配置($stateProvider，$urlRouterProvider){$urlRouterProvider.otherwise("/login");$stateProvider.state('main', {网址:/仪表板"，templateUrl: "app/views/dashboard.html",控制器:'MainCtrl'，数据:{ pageTitle:'RAGE'，requireLogin:true}}).state('登录', {网址:/登录"，templateUrl: "app/components/login/login-form.html",控制器:'登录控制'控制器为:'登录'})}和我的 app.js
(function () {'使用严格';angular.module('愤怒', ['ui.router','ui.bootstrap','ui.dashboard','kendo.directives','ngCookies']).run(['$rootScope', '$state', '$location', 'userService', 'loginService', init]);函数初始化($rootScope，$state，$location，userService，loginService){$rootScope.rageSessionVars = {};$rootScope.$state = $state;如果($rootScope.rageSessionVars.userID == 未定义){$state.go('登录');}}})();看起来您没有创建任何模块.您正在编写 angular.module('rage') 而您应该在 app.config 文件中编写 angular.module('rage', []).
来自文档:https://docs.angularjs.org/api/ng/function/angular.module
要创建一个新模块:
//创建一个新模块var myModule = angular.module('myModule', []);然后在 HTML 正文或 标记中将模块定义为 ng-app="rage".
由于您根本没有创建任何模块，也没有在 HTML 中启用 Angular，因此您的表单就像老式表单提交一样被提交.
因此将您的应用配置修改为:
var myModule = angular.module('rage', []).config(config)//... 你的代码而且，您的控制器代码很好，但您也可以像这样使用它:
myModule.controller('LoginCtrl', function() {})//....In Angular 1.4.7, I'm trying to implement a basic login form in this plunk http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview (Please click on the red Log into Dashboard button on the Home route).
However for some reason I cannot get the login() method to fire in my loginCtrl controller code.
Instead what it's doing is an old-school URL redirect with the user/password parameters passed in as form variables. I can't figure out what's wrong.
Key points here in my posted code:
1) login-form.html contains ng-submit="login.loginUser()"
2) app.config contains the login route 'login' which hooks into 'LoginCtrl as login'
3) 'LoginCtrl' contains anonymous method login.loginUser
4) app.js redirects to my login state if userId is undefined.
Here's the login-form.html template :
<div ng-show="error" class="alert alert-danger">{{error}}</div>
<form name="form" ng-submit="login.loginUser()" role="form">
<div class="form-group">
<label for="username">Username</label>
<i class="fa fa-key"></i>
<input type="text" name="username" id="username" class="form-control" ng-model="login.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<i class="fa fa-lock"></i>
<input type="password" name="password" id="password" class="form-control" ng-model="login.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Login</button>
<img ng-if="login.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
</div>
</form>
and my Login Controller code :
(function () {
'use strict';
angular.module('rage').controller('LoginCtrl',
['$rootScope', '$scope', '$cookies', '$modalInstance', '$q', 'datacontext', 'loginService', 'userService', authenticate]);
function authenticate($rootScope, $scope, $cookies, $modalInstance, $q, datacontext, loginService, userService) {
var login = this;
login.loginUser = function () {
login.dataLoading = true;
loginService.authUser(login.user, login.password);
};
}
})();
Here's the app.config with routes:
angular
.module('rage')
.config(config);
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('main', {
url: "/dashboard",
templateUrl: "app/views/dashboard.html",
controller: 'MainCtrl',
data: { pageTitle: 'RAGE', requireLogin: true }
})
.state('login', {
url: "/login",
templateUrl: "app/components/login/login-form.html",
controller: 'LoginCtrl'
controllerAs: 'login'
})
}
and my app.js
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'ngCookies'
]).run(['$rootScope', '$state', '$location', 'userService', 'loginService', init]);
function init($rootScope, $state, $location, userService, loginService) {
$rootScope.rageSessionVars = {};
$rootScope.$state = $state;
if ($rootScope.rageSessionVars.userID == undefined) {
$state.go('login');
}
}
})();
Looks like you are not creating any module. You are writing angular.module('rage') instead you should write angular.module('rage', []) in your app.config file.
From the doc: https://docs.angularjs.org/api/ng/function/angular.module
To create a new module:
// Create a new module
var myModule = angular.module('myModule', []);
Then define your module as ng-app="rage" in your HTML's body or <html> tag.
Since, you are not creating any module at all and not enabling the Angular in your HTML, your form is getting submitted like old-school form submission.
So modify your app config as:
var myModule = angular.module('rage', [])
.config(config) // ... your code
And, your controller code is fine but you can also use it like:
myModule.controller('LoginCtrl', function() {}) // ....
这篇关于Angular ng-submit 未触发所需的控制器方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
