Question

我在这个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模板：

＆＃13;

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

＆＃13;

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

＆＃13;

在我的本地应用中，它是通过网址发布旧式表单变量，我无法触发login.loginUser内的LoginCtrl函数。

提前告诉你......

鲍勃

Answer 1

我应用的控制器更改是：

angular.module('routerApp').controller('LoginCtrl', function ($rootScope, $scope) {

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

在模板中我从ng-if和ng-submit中删除了login.。

Here是一个有效的蠢货。

Answer 2

由于某些奇怪的原因（可能是ui-router版本控制），controllerAs无效。

Diana的回答是有效的，但它没有使用controlleras语法。如果您仍想使用它，请将ui-router设置更改为：

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

应该这样做;）

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

AngularJS登录表单，其中ng-click无效

2 个答案: