AngluarJS控制器返回工厂，但不显示在模板中

Question

我的控制器正在调用服务工厂，我看到工厂成功执行 API 调用并将结果返回给控制器，但分配给控制器的模板没有呈现结果。

厂：

.factory("clubService", function($http,$q) {
var clubs= [] ;
function clubsAll() {
clubs = [] ;
setVars() ; // function to set baseUrl/headers, etc   
var dataObj = [{"type":1,"userID":userData.user_ID}]
var req = {
method: 'POST',
url: baseUrl ,
headers: headers,
data: JSON.stringify(dataObj)
}
return $http(req)
.then(function(response){
clubs = response.data ;
return clubs ;
}).catch(function(err) {
errMgmt("services/apiCall",700,err.code+", "+err.msg) ;
});
}
return {
all: function() {
return clubsAll() ;
//return clubs ;
}
}) ;

控制器：

.controller('ClubCtrl', function($scope,$state,clubService) {
$scope.clubs = clubService.all() ;
console.log($scope.clubs) ;   // 'clubs' is getting populated in console.
})

在我的 HTML 中

<div ng-if="clubs.length == 0">
<img ng-src="img/loader.gif">
</div>
<div ng-if="clubs.length > 0">
<div ng-repeat="club in clubs">
{{club.Name}}
</div>
</div>

但是我的 HTML 中没有任何内容被渲染，任何引用clubs的内容都没有显示，ng-if 仍然被注释掉，没有 ng-repeat 显示。

Answer 1

在 clubService， clubsAll(( 方法中，当你陈述这一行时，你实际上是在返回一个承诺

return $http(req)
.then(function(response){
clubs = response.data ;
return clubs ;
}).catch(function(err) {
errMgmt("services/apiCall",700,err.code+", "+err.msg) ;
});

该承诺可以解决(成功(或拒绝(错误(，如果您想从该承诺中获取俱乐部数据，则需要 承诺成功回调 (.then( 上的控制器逻辑上的链

.controller('ClubCtrl', function($scope,$state,clubService) {
clubService.all().then(function(response){
$scope.clubs = response;
});
})

Answer 2

我想通了，我需要等待控制器中返回承诺。

.controller('ClubCtrl', function($scope,$state,clubService) {
clubService.all()
.then(function(response) {
$scope.clubs = response ;
console.log($scope.clubs) ;   // 'clubs' is getting populated in console.
}) ;
})