AngularJS「不能讀取屬性‘然後’未定義」

Question

我有這個問題，當我登錄按鈕點擊，鉻控制檯日誌中：

angular.min.js:117 TypeError: Cannot read property 'then' of undefined at m.$scope.logIn (loginModuleController.js:11)

服務：

angular.module('loginModule') 
.factory('loginService', function($http){ 
    return{ 
    login: function(username, password){ 
     var session; 
     $http.post('../server/php/auth/auth.php', { 
     username: username, 
     password: password 
     }) 
     .then(function(res){ 
     session = res; 
     }); 
     return session; 
    }, 
    isLogged: function(){ 
     return $http.get('../angCMS/server/php/auth.php?is_logged=true'); 
    }, 
    logOut: function(){ 
     return $http.get('../angCMS/server/php/auth.php?logout=true'); 
    } 
    }; 
}); 

控制器：

angular.module('loginModule') 
.controller('LoginCtrl', ['$scope', 'loginService', function($scope, loginService){ 

    $scope.auth = false; 

    $scope.username; 
    $scope.password; 
    $scope.logIn = function(){ 
    loginService.login($scope.username, $scope.password).then(function(response){ 

    }, function(res){ 

    }); 
    }; 

    $scope.isLogged = function(){ 
    loginService.isLogged() 
    .then(function(response){ 
     if(response){ 
     $scope.auth = true; 
     } 
    }); 
    }; 

    $scope.logOut = function(){ 
    loginService.logOut() 
    .then(function(response){ 
     if(response){ 
     $scope.auth = false; 
     } 
    }); 
    }; 

}]); 

，這是HTML模板：

<div class="container" ng-if="auth==false"> 
    <div class="col-md-4 col-md-offset-4"> 
    <div class="row"> 
     <br/><h2 align="center">Login</h2> 
    </div> 
    <div class="well"> 
     <form class="form-horizontal"> 
     <fieldset> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Username" ng-model="username" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" placeholder="Password" ng-model="password" required> 
      </div> 
      <div class="form-group"> 
       <button class="btn btn-md btn-primary btn-block" type="submit" ng-click="logIn()">Sign in</button> 
      </div> 
     </fieldset> 
     </div> 
    </form> 
    </div> 
</div> 

PHP登錄方法：

public function login($user, $pass){ 

     $user = htmlspecialchars(trim($user)); 
     $pass = md5(htmlspecialchars(trim($pass))); 

     $res = $this->DB->prepare("SELECT * FROM `admin` WHERE username = :user"); 
     if(!$res->execute(Array(":user"=>$user))) 
      die(mysql_error()); 

     $row = $res->fetch(PDO::FETCH_ASSOC); 

     if(!$row['password'] == $pass) 
      die("Errore: password errata!"); 

     $_SESSION['logged'] = $row; 
     array_push($session, $_SESSION['logged'], true); 

     return $session; 
    } 

Answer 1

這更多的是對承諾問題的誤用。

你可能想先看看的承諾是如何工作的：

• https://docs.angularjs.org/api/ng/service/ $ Q
• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

從您的服務代碼：

login: function(username, password){ 
    var session; 
    $http.post('../server/php/auth/auth.php', { 
    username: username, 
    password: password 
    }) 
    .then(function(res){ 
    session = res; 
    }); 
    return session; 
} 

當login(username, password)被調用，會話仍然是undefined返回。

這是因爲$http.post()是異步函數，.then()子句不會立即執行。

正如指出的Snixtor's answer， 你應該 「迴歸的$http.post()返回值」：

login: function(username, password){ 
    return $http.post('../server/php/auth/auth.php', { 
    username: username, 
    password: password 
    }); 
} 

然後參照您的控制器的登錄方法：

$scope.logIn = function(){ 
    loginService.login($scope.username, $scope.password).then(function(response){ 
    // response === 'session' 
    }, function(res){ 

    }); 
}; 

從loginService.login().then()的response參數恰好是您之前實施中預期的session變量的值。

Answer 2

你返回名爲 「會話」 的未賦值的變量。所以你在這裏登錄的方法正在返回undefined。未定義的沒有一個叫做then的方法。

login: function(username, password){ 
     var session; 
     $http.post('../server/php/auth/auth.php', { 
     username: username, 
     password: password 
     }) 
     .then(function(res){ 
     session = res; 
     }); 
     return session; 
    }, 

我的猜測是你實際上想返回$ http.post方法，這反過來返回一個承諾。這樣你可以在控制器中使用會話？

Answer 3

您的服務功能login未能將呼叫創建的承諾返還給$http.post。相反，你需要這個：

login: function(username, password){ 
    return $http.post('../server/php/auth/auth.php', { 
    username: username, 
    password: password 
    }); 
} 

請注意，我已經從函數中刪除了session變量。這是控制器中需要處理響應的then函數。

您的isLogged和logOut功能已經很好看了。只需重複該模式即可。