JS는 각도 컨트롤러 객체 내 변수를 인식하지 않습니다

단순한 로그인 확인을 만들려고했지만 유효성 비교 비교가 시작될 때 유효성 검사 기능이 작동하도록 설정 되었으나 콘솔 sais에서 변수 "userName이 정의되지 않았습니다" 그것은 분명합니다.JS는 각도 컨트롤러 객체 내 변수를 인식하지 않습니다

무엇이 잘못 정의되어 있는지 말해 줄 수 있습니까?

각 컨트롤러 코드 :

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 

[email protected]://localhost:39191/login.js:23:13 
[email protected]://localhost:39191/login.js:11:9 
anonymous/[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js line 231 > Function:2:292 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:126:19 
Kc[b]</<.compile/</</[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:195 
uf/this.$get</[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103 
uf/this.$get</[email protected]://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 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:37:31 
Qf/[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:36:486

출처

2016-08-19 Gabriel H

유는 그것이 this.userName ???? (this.userName == "")의 경우 { 경고 ("사용자 이름 ="+는 userName) 야해 아래 경고 한 Statment에 모습을 가질 수 있습니다; this.userNameValid = false; 결과 = false; } 실제로 – Ruhul

"당신은"응답을 봐야합니다. –

의 일부인 – ThatAwesomeCoder

항상 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; 
     } 
    }; 
});

출처

2016-08-19 06:19:16 Satpal

이것은 컨트롤러의 컨텍스트를 변수로 설정 한 다음 컨트롤러를 통해 변수를 참조하여 정답입니다. – ThatAwesomeCoder

당신이 제거하려고 this.userName 언급하지 않은 경고 상자 또는 변경하십시오.

출처

2016-08-19 06:17:49

JS는 각도 컨트롤러 객체 내 변수를 인식하지 않습니다

답변

관련 문제