与AngularJS登录表单NG单击不工作 [英] AngularJS Login form with ng-click not working

问题描述

我写了这个基本的登录表单花掉 http://plnkr.co/编辑/ xQEN1ZNN5ZEw1CSwNw97？p = preVIEW （点击红色登录到家庭路线仪表板按钮）。

但由于某种原因，我不能得到的login（）方法在我loginCtrl控制器code火。

为什么这个例子的工作，而我是不是？ http://plnkr.co/edit/H4SVl6?p=$p$pview

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

下面是 LoginCtrl code还有登录-form.html 模板：

\r

\r

（函数（）{\r
    使用严格的;\r
\r
    angular.module（'routerApp'）。控制器（'LoginCtrl'，\r
        ['$ rootScope'，'$范围，验证]）;\r
\r
    功能进行身份验证（$ rootScope，$范围，userService）{\r
\r
        VAR登录=这一点;\r
\r
        login.loginUser =功能（）{\r
            login.dataLoading = TRUE;\r
            //loginService.authUser(login.user，login.password）; // 去做 ！！！\r
        };\r
        login.test =功能（）{\r
            VAR测试= TRUE;\r
        };\r
    }\r
}）（）;

\r

＆LT; D​​IV NG秀=错误级=警戒警报的危险＆GT; {{错误}}＆LT; / DIV＆GT;\r
＆LT;形式NG提交=login.loginUser（）NAME =形式＆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

在我的本地应用程序，它通过URL发布旧式表单变量，我不能让它火里面<$下的 login.loginUser 功能C $ C> LoginCtrl 。

thnk你提前...

鲍勃

解决方案

一些奇怪的原因（也许UI路由器版本）的 controllerAs 是行不通的。

Diana's答案是有效的，但它doesn't使用 controlleras 语法。
如果你仍然想使用它，改变了 UI路由器设置为：

  .STATE（'登陆'，{
        网址：/登录
        templateUrl：登录-​​form.html
        控制器：'LoginCtrl作为登录'，
    }）
 

这是应该做的伎俩;）

检查出来：
http://plnkr.co/edit/OCqNexVeFFxt4kUuEVc1?p=$p$pview

I wrote a basic login form in this plunk http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview (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.

Why is this example working, and mine is not ? http://plnkr.co/edit/H4SVl6?p=preview

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.

Here is LoginCtrl code as well as the login-form.html template :

(function () {
    'use strict';

    angular.module('routerApp').controller('LoginCtrl',
        ['$rootScope', '$scope', authenticate]);

    function authenticate($rootScope, $scope,   userService) {

        var login = this;

        login.loginUser = function () {
            login.dataLoading = true;
            //loginService.authUser(login.user, login.password);  // TO DO !!!
        };
        login.test = function () {
            var test = true;
        };
    }
})();

<div ng-show="error" class="alert alert-danger">{{error}}</div>
<form  ng-submit="login.loginUser()" name="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>

In my local app, it is posting the old-style form variables via the URL, and I cannot get it to fire the login.loginUser function below inside LoginCtrl.

thnk you in advance...

Bob

解决方案

for some odd reason (perhaps ui-router versioning) the controllerAs is not working.

Diana´s answer is valid, but it doesn´t use the controlleras syntax. If you still want to use it, change the ui-router setting to:

.state('login', {
        url: "/login",
        templateUrl: "login-form.html",
        controller: 'LoginCtrl as login',
    })

That should do the trick ;)

Check it out: http://plnkr.co/edit/OCqNexVeFFxt4kUuEVc1?p=preview

这篇关于与AngularJS登录表单NG单击不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！