Angularjs在服務中使用承諾

Question

我有一個頁面，該頁面對api進行了多次調用，以返回一頁的記錄。 這是很多信息，需要花費一些時間來加載。 我正在嘗試鏈接諾言，以便在顯示數據的頁面加載之前給數據加載時間。 我使用以下內容來調用第一部分：

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

我試圖弄清楚如何對我必須調用和鏈接的每個函數在服務中使用promise，以便直到所有get函數都不會顯示“ selectAll”函數中的“ then”函數已經完成。 我嘗試將其放在服務中：

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

這有效，直到我嘗試向其他調用中添加更多的Promise（即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;

我收到錯誤消息“無法獲取未定義或空引用的屬性'then'”。

函數“ getSelectedData”對服務進行了大約15次調用。 我需要初始的“解析”才能在它們全部完成之后才能執行。 我對此並不陌生，但是我很確定這與鏈接諾言有關，但是我不知道如何在這里完成我所需要的。 非常感謝您的協助！

Answer 1

在對“ $ 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);
    }

希望這有助於其他人。 快樂的編碼！