AngularJS控制器返回工厂但未在模板中显示答案

【问题标题】：AngluarJS controller getting returned factory but not displaying in templateAngularJS控制器返回工厂但未在模板中显示
【发布时间】：2019-02-17 10:31:12
【问题描述】：

我的控制器正在调用服务工厂，我看到工厂成功调用 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 显示。

【问题讨论】：

标签： javascript angularjs promise angular-services

【解决方案1】：

在 clubService, clubsAll() 方法中，当你声明这一行时，你实际上是在返回一个 Promise

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

【讨论】：

在您发布您的回复之前，我刚刚想通了......但我感谢您，因为您可能正在输入它，因为我正在输入我的。 ;)
@rolinger 非常温和的举动，谢谢！直到我添加了我的答案之后，我才注意到您添加了答案。

【解决方案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.
   }) ;
})

【讨论】：