角NG-提交不触发所需的控制器方法 [英] Angular ng-submit not firing the desired controller method

查看：127
本文介绍了角NG-提交不触发所需的控制器方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在角1.4.7，我想实现这个普拉克的 http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=$p$pview （请点击红色的登录到仪表盘上的主页按钮路线）。

但由于某种原因，我不能让登录（）方法在我的 loginCtrl 控制器$ C $火角

相反，它在做什么是一个老派的URL与传递的表单变量的用户名/密码参数重定向。我无法弄清楚什么是错的。

这里的关键点在我的贴code：

1）登录-form.html包含 NG-提交=login.loginUser（）

2）的app.config包含登录路线登录其中挂钩到'LoginCtrl作为登录

3）'LoginCtrl 包含匿名方法 login.loginUser

4）app.js重定向到我的登录状态，如果用户id是不确定的。

这里的登录-form.html 模板：

\r
\r

＆LT; D​​IV NG秀=错误级=警戒警报的危险＆GT; {{错误}}＆LT; / DIV＆GT;\r
＆LT;表格名称=形式NG提交=login.loginUser（）角色=形式＆GT;\r
    ＆LT; D​​IV CLASS =表单组＆GT;\r
        ＆LT;标签=用户名＆GT;用户名和LT; /标签＆gt;\r
        ＆LT; I类=发发键＆GT;＆LT; I＆GT /;\r
        ＆LT;输入类型=文本名称=用户名ID =用户名级=表格控NG模型=login.username要求/＆GT;\r
        ＆LT;跨度NG秀=$ form.username脏放大器;＆安培; form.username $ error.required级=帮助块＆GT;用户名是必需的＆LT; / SPAN＆GT;\r
    ＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =表单组＆GT;\r
        ＆LT;标签=密码＆GT;密码和LT; /标签＆gt;\r
        ＆LT; I类=发发锁＆GT;＆LT; I＆GT /;\r
        ＆LT;输入类型=密码NAME =密码ID =密码级=表格控NG模型=login.password要求/＆GT;\r
        ＆LT;跨度NG秀=$ form.password脏放大器;＆安培; form.password $ error.required级=帮助块＆GT;需要密码及LT; / SPAN＆GT;\r
    ＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =表单行动＆GT;\r
        ＆LT;按钮式=提交NG-禁用=$形式无效|| dataLoading。阶级=BTN BTN-危险＆GT;登录和LT; /按钮＆GT;\r
        ＆LT; IMG NG-IF =login.dataLoading src=\"data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==\"/>\r
    ＆LT; / DIV＆GT;\r
＆LT; /形式为GT;

\r

\r
\r

和我的登录控制器code：

\r
\r

（函数（）{\r
    使用严格的;\r
    angular.module（'愤怒'）。控制器（'LoginCtrl'，\r
        ['$ rootScope'，'$范围，$饼干'，'$ modalInstance'，'$ Q'，'的datacontext'，'login服务'，'userService'，验证]）;\r
\r
    功能进行身份验证（$ rootScope，$范围，$饼干，$ modalInstance，$ Q的datacontext，login服务，userService）{\r
\r
        VAR登录=这一点;\r
\r
        login.loginUser =功能（）{\r
            login.dataLoading = TRUE;\r
            loginService.authUser（login.user，login.password）;\r
        };\r
\r
    }\r
}）（）;

\r

\r
\r

下面是与路线的app.config：

\r
\r

角\r
.module（'愤怒'）\r
的.config（配置）;\r
\r
功能配置（$ stateProvider，$ urlRouterProvider）{\r
$ urlRouterProvider.otherwise（/登录）;\r
$ stateProvider\r
.STATE（'主'，{\r
    网址：/仪表板，\r
    templateUrl：应用程序/视图/ dashboard.html\r
    控制器：'MainCtrl'，\r
    数据：{PAGETITLE：RAGE，requireLogin：真正}\r
}）\r
.STATE（'登陆'，{\r
    网址：/登录\r
    templateUrl：应用程序/组件/登录/注册-form.html\r
    控制器：'LoginCtrl\r
    controllerAs：登录\r
}）\r
\r
}

\r

\r
\r

和我app.js

\r
\r

（函数（）{\r
    使用严格的;\r
    angular.module（'愤怒'，[\r
       ui.router'，\r
       ui.bootstrap'，\r
       ui.dashboard'，\r
       kendo.directives'，\r
       ngCookies\r
    ]）运行（['$ rootScope'，'$州'，'$的位置，userService'，'login服务时，init]）;\r
\r
    功能的init（$ rootScope，$状态，$位置，userService，login服务）{\r
        $ rootScope.rageSessionVars = {};\r
        $ rootScope $状态= $状态。\r
\r
        \r
        如果（$ rootScope.rageSessionVars.userID ==未定义）{\r
            $ state.go（'登录'）;\r
        }\r
              \r
    }\r
\r
}）（）;

\r

\r
\r


解决方案

看起来你没有创建任何模块。你写 angular.module（'愤怒'）相反，你应该写 angular.module（'愤怒'，[]）在你的app.config文件。

从DOC： https://docs.angularjs.org/api/纳克/功能/ angular.module

要创建一个新的模块：

  //创建一个新的模块
VAR MyModule的= angular.module（'Mymodule中'，[]）;

然后定义你的模块为 NG-应用=愤怒在你的HTML的身体或＆LT; HTML＆GT; 标签。

一直以来，没有创建在所有的任何模块，而不是使角在你的HTML，你的表格是越来越像提交的老学校提交表单。

所以，修改应用配置如下：

  VAR Mymodule中= angular.module（'愤怒'，[]）
    的.config（配置）// ...您的code

和，你的控制器code是不错，但你也可以用它喜欢的：

  myModule.controller（'LoginCtrl'，函数（）{}）// ....

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() {}) // ....

这篇关于角NG-提交不触发所需的控制器方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆