Question

我试图创建一个简单的登录验证，但验证功能会在验证比较开始时抓住功能，并且控制台认为变量“userName未定义”虽然很明显。

能否告诉我，我的定义是错误的？

角度控制器代码：

var app = angular.module("LoginApp", []);
app.controller("LoginController", function ($http) {
    this.userName = "";
    this.password = "";
    this.userNameValid = true;
    this.passwordValid = true;

    /*submit the form*/
    this.submit = function () {
        alert("submit");
        this.validate();

    };

    /* make sure user name and password has been inserted*/
    this.validate = function () {
        alert("validate");
        var result = true;
        this.userNameValid = true;
        this.passwordValid = true;

        if (this.userName == "") {
            alert("username="+userName);
            this.userNameValid = false;
            result = false;
        }

        if (this.password == "") {
            this.passwordValid = false;
            result = false;
        }
        alert("validuserNameValid==" + userNameValid + " passwordValid==" + passwordValid);
        return result;
    };
});

HTML表单：

<body ng-app="LoginApp" ng-controller="LoginController as LoginController">

        <form role="form" novalidate name="loginForm" ng-submit="LoginController.submit()">
            <div id="loginDetails">
                <div class="form-group">
                    <label for="user"> User Name:</label>
                    <input type="text" id="user" class="form-control" ng-model="LoginController.userName" required />
                    <span ng-show="LoginController.userNameValid==false" class="alert-danger">field is requiered</span>
                </div>
                <div class="form-group">
                    <label for="password" >Password:</label>
                    <input type="password" id="password" class="form-control" ng-model="LoginController.password" required />
                    <span ng-show="LoginController.passwordValid==false" class="alert-danger">field is requiered</span>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    {{"entered information:" +"\n"+LoginController.userName+" "+ LoginController.password}}
                </div>
            </div>
        </form>
    </body>

日志：

Error: userName is not defined

this.validate@http://localhost:39191/login.js:23:13
this.submit@http://localhost:39191/login.js:11:9
anonymous/fn@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js line 231 > Function:2:292
b@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:126:19
Kc[b]</<.compile/</</e@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:195
uf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:335
Kc[b]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:245
Rf@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:37:31
Qf/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:36:486

Answer 1

始终明智地使用this。我建议你将this的引用存储在变量中，然后在需要的地方使用它。

var app = angular.module("LoginApp", []);
app.controller("LoginController", function ($http) {
    //Store the reference of this in a variable
    var lc = this;

    //Use the stored refrence
    lc.userName = "";

    /* make sure user name and password has been inserted*/
    lc.validate = function () {
        if (lc.userName == "") {
            alert("username="+userName);
            lc.userNameValid = false;
            result = false;
        }
    };
});

Answer 2

在警报框内你没有提到过.userName尝试删除警告框或更改它们。

JS不会识别角度控制器对象中的变量

2 个答案: