gpt4 book ai didi

javascript - JS 无法识别 Angular Controller 对象中的变量

转载 作者:行者123 更新时间:2023-12-03 06:17:23 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的登录验证,但是当验证比较开始时,验证函数就会起作用,并且控制台显示变量“用户名未定义”,尽管它显然是这样。

谁能告诉我我定义错了什么?

Angular Controller 代码:

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

最佳答案

始终明智地使用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;
}
};
});

关于javascript - JS 无法识别 Angular Controller 对象中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39032205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com