2016-02-25 67 views
1

我有一个页面可以对api进行多次调用,以便为一个页面返回记录。这是很多信息,需要时间来加载。我试图链接承诺给数据时间加载显示它加载页面之前加载。我用下面的调用第一部分:Angularjs在服务中使用承诺

$scope.selectAll = function() { 
    alert('Please wait while your data is loaded...'); 
    $scope.print.sections = angular.copy($scope.sections); 
    var promise = getAllSections($scope.print.sections); 

    promise.then(function() { 
     $scope.dataLoading = false; 
     alert('Dataload complete!'); 
    }) 

}; 

function getAllSections(sections) { 
    var deferred = $q.defer(); 
    deferred.notify('Getting Data'); 
    for (var i = 0; i < $scope.print.sections.length; i++) { 
     getSectionData($scope.print.sections[i]); 
    } 
    deferred.resolve('Data Complete') 
    return deferred.promise; 
}; 

我的问题是功能“getSectionData”在我下面的服务(为简便起见服务这只是一部分)调用几个功能:

angular.module('myModule').service('contractorService', [ 
    '$http', '$q', function ($http, $q) { 

     this.getcompletioncertificatepage = function() { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetCompletionCertificate') 
     }; 
     this.getselectedcontractorservices = function (id) { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetSelectedContractorServices?sectionId=' + id) 
     } 
     this.getavailablecontractorservices = function (id) { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetAvailableContractorServices?sectionId=' + id) 
     }; 

     this.getgeneraluploadimage = function (id) { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetGeneralUploadDocument?imageType=' + id) 
     }; 
     this.getemrtabulation = function() { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetEMRTabulationColumns') 
     }; 

     this.getimage = function (id, docDate) { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetImage', {"emrDetailID": id, "docDate" : docDate}) 
      }; 
     this.getemrquestion = function() { 
      return $http.post('/SSQV4/SSQV5/Contractor/GetEMRQuestion') 
     }; 

在我的控制,我把这些像这样:

 function getSectionData(section) { 
      var id = section.QuestionSectionID; 
        contractorService.getIncidentColumns(clusterId) 
        .success(function (data) { 
    ...} 
       contractorService.getgeneralincidentquestions(id) 
       .success(function (data) { 
...} 

    ... (there are many calls to the service here) 
     } 

我试图找出如何使用承诺的服务,为每一个,我要打电话,把它们连,使得“T的功能我的“selectAll”函数中的“hen”函数在所有get函数完成之前不会显示。我试图把这个在servcie:

 this.getIncidentDetailByQtr = function (id) { 
    var deferred = $q.defer(); 
    $http.post('/SSQV4/SSQV5/Contractor/GetIncidentDetailByQtr?tabId=' + id) 
    return deferred.promise; 
}; 

,这在控制器:

  var promise = contractorService.getIncidentDetailByQtr(7) 
      .then(function (data) { 
       $scope.qtrDetail = data; 
       deleteTableRows($scope.qtrDetail); 
      }); 

其工作,直到我尝试更多的承诺(即VAR promiseA等)添加到其它呼叫。

当我尝试这样做:

   var promise = contractorService.getIncidentDetailByQtr(7) 
       .then(function (data) { 
        $scope.qtrDetail = data; 
        deleteTableRows($scope.qtrDetail); 
       }); 
       $scope.incidentTableDefinition = '<table>' + firstRow + secondRow + thirdRow + '<tr style="text-align:center" ng-repeat="q in qtrDetail">' + repeatRow + '</tr></table>'; 
       firstRow = ''; 
       secondRow = ''; 
       thirdRow = ''; 
       repeatRow = ''; 
       var promiseA = contractorService.getincidentsummarycolumns(9) 
       .then(function (data) { 
        $scope.summaryColumns = data; 

我收到错误“无法获取属性‘然后’的未定义或空引用”。

函数“getSelectedData”对服务进行了约15次调用。我需要最初的“解决方案”才能执行,直到所有这些完成后。我对此很陌生,但我很确定这与链接承诺有关,但我无法弄清楚如何完成我需要的内容。任何援助非常感谢!

+1

此作业有[$ q.all()'([ref](https://docs.angularjs.org/api/ng/service/$q))。 –

+0

谢谢你。通过搜索$ q.all(),我可以找到答案。 –

+0

如果你发布了答案(并接受你自己的答案),这将是很好的,以便将来的读者可以从中受益! –

回答

0

得到了以下的“$ q.all”一个小小的研究后,开始工作:

$scope.selectAll = function() { 
     alert('Please wait while your data is loaded...'); 
     $scope.print.sections = angular.copy($scope.sections); 
     var promise = getAllSections($scope.print.sections); 

     promise.then(function() { 
      $scope.dataLoading = false; 
      alert('Dataload complete!'); 
     }) 

    }; 
    function getAllSections(sections) { 
     var promises = []; 
     angular.forEach(sections, function (section) { 
      var promise = getSectionData(section) 
      promises.push(promise); 
     }); 
     return $q.all(promises); 
    } 

希望这可以帮助其他人。快乐的编码!