带有 ng-click 的 AngularJS 登录表单不起作用 [英] AngularJS Login form with ng-click not working

问题描述

我在这个 plunk 中写了一个基本的登录表单 http://plnkr.co/edit/xQEN1ZNN5ZEw1CSwNw97?p=preview(点击 Home 路线上的红色 Log into Dashboard 按钮).

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

为什么这个例子有效，而我的不行?http://plnkr.co/edit/H4SVl6?p=preview

相反，它正在做的是使用作为表单变量传入的用户/密码参数的老式 URL 重定向.我不知道出了什么问题.

这里是 LoginCtrl 代码以及 login-form.html 模板:

(function () {'使用严格';angular.module('routerApp').controller('LoginCtrl',['$rootScope', '$scope', 认证]);功能认证($rootScope，$scope，userService){var 登录 = 这个;login.loginUser = 函数 () {login.dataLoading = true;//loginService.authUser(login.user, login.password);//去做 ！！！};登录.测试 = 函数 () {var 测试 = 真；};}})();

<div ng-show="error" class="alert alert-danger">{{error}}</div><form ng-submit="login.loginUser()" name="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 + QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwct​​XXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh + QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh + QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA =="/>

在我的本地应用程序中，它通过 URL 发布旧式表单变量，我无法让它在 LoginCtrl 中触发下面的 login.loginUser 函数.

提前谢谢你...

鲍勃

解决方案

由于某种奇怪的原因(可能是 ui-router 版本控制)，controllerAs 无法正常工作.

Diana 的回答是有效的，但它没有使用 controlleras 语法.如果还想用，把ui-router设置改成:

.state('登录', {网址:/登录"，templateUrl: "登录表单.html",控制器:'LoginCtrl 作为登录'，})

这应该可以解决问题;)

检查一下:http://plnkr.co/edit/OCqNexVeFFxt4kUuEVc1?p=preview

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

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