[英]AngularJS 'Cannot read property 'then' of undefined'
我有這個問題,當我點擊登錄按鈕時,chrome控制台會記錄下這個:
angular.min.js:117 TypeError:無法在m。$ scope.logIn(loginModuleController.js:11)中讀取未定義的屬性'then'
服務:
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;
}
您將返回名為“session”的未分配變量。 那么你在登錄方法中所做的就是返回undefined。 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方法,后者又返回一個promise。 這樣你可以在控制器中使用會話?
您的服務功能login
無法返回由$http.post
調用創建的承諾。 相反,你需要這個:
login: function(username, password){
return $http.post('../server/php/auth/auth.php', {
username: username,
password: password
});
}
另請注意,我已從函數中刪除了session
變量。 這是then
在你的控制器功能需要被處理的響應。
您的isLogged
和logOut
函數已經很好看了。 請重復這種模式。
這更多是濫用承諾問題。
您可能想先了解一下Promises的工作原理:
從您的服務代碼:
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()
是一個異步函數, $http.post()
.then()
子句不會立即執行。
正如Snixtor的回答所指出的那樣,你應該“返回$http.post()
的返回值”:
login: function(username, password){
return $http.post('../server/php/auth/auth.php', {
username: username,
password: password
});
}
然后參考你的控制器的logIn方法:
$scope.logIn = function(){
loginService.login($scope.username, $scope.password).then(function(response){
// response === 'session'
}, function(res){
});
};
來自loginService.login().then()
的response
參數正是您之前實現中的預期session
變量的值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.