Question

在Angular 1.4.7中，我尝试在此插件http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview中实现基本登录表单（请单击Home路径上的红色Log into Dashboard按钮）。

但由于某些原因，我无法在我的login()控制器代码中触发loginCtrl方法。

相反，它所做的是使用作为表单变量传入的用户/密码参数的旧式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模板：

＆＃13;

<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>

＆＃13;

和我的登录控制器代码：

＆＃13;

(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);
        };

    }
})();

＆＃13;

这是带有路线的app.config：

＆＃13;

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'
})

}

＆＃13;

和我的app.js

＆＃13;

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

＆＃13;

Answer 1

看起来你没有创建任何模块。您正在编写angular.module('rage')，而应在app.config文件中编写angular.module('rage', [])。

来自文档：https://docs.angularjs.org/api/ng/function/angular.module

创建新模块：

// Create a new module
var myModule = angular.module('myModule', []);

然后在HTML正文或ng-app="rage"标记中将您的模块定义为<html>。

因为您根本没有创建任何模块而且没有在HTML中启用Angular，所以您的表单会像旧式表单提交一样提交。

因此，请将您的应用配置修改为：

var myModule = angular.module('rage', [])
    .config(config) // ... your code

并且，您的控制器代码很好，但您也可以使用它：

myModule.controller('LoginCtrl', function() {}) // ....

Angular ng-submit未触发所需的控制器方法

1 个答案: