2015-12-26 63 views
1

返回空值我有一个这样的控制器:登录控制器上后

var myApp = angular.module('myApp', ['ui.router']); 
myApp.controller('loginController',['$http', function($http) 
{ 
    this.loginForm = function(){ 
     console.log(this.email); //prints undefined 
     console.log(this.password); //prints undefined 
     var encodedString = 'email=' + 
       encodeURIComponent(this.email) + 
       '&password=' + 
       encodeURIComponent(this.password); 
     $http({ 
      method:'POST', 
      url: 'rs/loginResource', 
      data: encodedString, 
      headers: {'Content-Type' : 'application/x-www-form-urlencoded'} 
     }); 
    }; 
}]); 

this.emailthis.password返回undefined。

我的形式:

<!-------------- loginController declared here (ERROR when declared)-------------------> 
<div class="row" ng-controller="loginController as loginCtrl"> 
<div class="col-md-12"> 
    Login via 
    <div class="social-buttons"> 
     <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> 
     <a href="#" class="btn btn-google" ><i class="fa fa-google"></i> Google</a> 
    </div> 
    or 

    <!------------------------------------ Here is the form ----------------------------------------------------------> 

    <form class="form" role="form" method="post" ng-submit="loginCtrl.loginForm()" accept-charset="UTF-8" id="login-nav"> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputEmail2" ng-model="loginCtrl.inputData.email">Email address</label> 
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
     </div> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputPassword2" ng-model="loginCtrl.inputData.password">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
      <div class="help-block text-right"><a href="">Forget the password ?</a></div> 
     </div> 
     <div class="form-group"> 
      <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox"> keep me logged-in 
      </label> 
     </div> 
    </form> 

    <!------------------------------------ End of form ----------------------------------------------------------> 
</div> 
<div class="bottom text-center"> 
    New here ? <a href="#"><b>Join Us</b></a> 
</div> 
</div> 

试图在打印控制台console.log(this.email); console.log(this.password);它打印undefined两个值。有没有其他的方式来捕捉角度值

+1

'this'的'$ http.get'函数内部是不一样的控制器的'this' http://stackoverflow.com/a/34474833/2435473 –

+0

在您的形式使用'纳克-model = “loginCtrl.inputData.email”'。尝试记录'inputData'对象。 – georgeawg

回答

2

看起来你真的想工作“范围自由”,我建议你看看“打字稿”。这是真正的原生与角度“范围免费”,与“ControllerAs”。

您的问题 - > 首先使用 “inputData.email” & “inputData.password” 但你打电话.email &。密码。

之后,你需要“拖”你到这个功能, 它会是这个样子:

function loginController() { 
       var _this = this; 
       this.loginForm = function() { 
        console.log(_this.inputData.email); 
        console.log(_this.inputData.password); 
        var encodedString = 'email=' + 
         encodeURIComponent(_this.inputData.email) + 
         '&password=' + 
         encodeURIComponent(_this.inputData.email); 
        $http({ 
         method: 'POST', 
         url: 'rs/loginResource', 
         data: encodedString, 
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
        }); 
       }; 

退房,如果你想跳开始角+打字稿这个链接(我真的建议它!)
http://www.codeproject.com/Articles/888764/Getting-started-with-TypeScript-in-AngularJS-appli