我如何使用Promise / $ q.all

Question

我正在尝试根据以下不同条件动态捕获HTML内容。

 function insertHtmlContent(dates, Plant_Id) {
        var dayhtmlContent1 = ''; var dayhtmlContent2 = '';
        var deferred = $q.defer();
        var urlCalls = [];

        urlCalls.push(getMAStatusASof(Plant_Id).then(function (result0) {
            dayhtmlContent = '<table class="GeneratedTable" style="width:100%">  <tr>  <td rowspan="2" style="width:20%">Cases ' + $scope.StatusASof + ' </td>  <td rowspan="2" style="width:10%">Total</td> ';
            for (var a = 0; a <= 6; a++) {
                if (a == daySeq - 1) {
                    dayhtmlContent += '<td colspan="3"  style="background-color:yellow "> {{dates[ ' + a + ']}} </td> ';
                }
                else {
                    dayhtmlContent += '<td colspan="3"  > {{dates[ ' + a + ' ]}} </td>  ';
                }
            }        
            return dayhtmlContent;
        }));

        urlCalls.push(getShiftDetails(Plant_Id, Week_ID, Area_Id).then(function (result1) {
            ShiftDetails = $scope.ShiftDetails;
            dayhtmlContent1 += '<tr> ';
            if (ShiftDetails.length > 0) {
                for (var l = 0; l <= ShiftDetails.length - 1; l++) {
                    if (ShiftDetails[l].SHIFTPOS == true) {
                        daySeq = ShiftDetails[l].DAY_SEQ;
                    }
                   ...
                    if (shiftPS == true) {
                        dayhtmlContent1 += '<td style="background-color:yellow"><a href="#" class="tooltip fade" data-placement="bottom" data-toggle="tooltip" title=" ' + shiftStart + '' + shiftEnd + ' "> ' + shift + '</a>  </td> ';
                    }
                    else {
                        dayhtmlContent1 += '<td   ><a href="#" class="tooltip fade" data-placement="bottom" data-toggle="tooltip" title=" ' + shiftStart + '' + shiftEnd + ' "> ' + shift + '</a>  </td> ';
                    }
                }
                dayhtmlContent1 += '</tr>';
            }         
            return dayhtmlContent1;
        }));

        urlCalls.push(getAllAreas(Plant_Id).then(function (result2) {
            AreasList = $scope.Areas;
            if (AreasList.length > 0) {
                Count = AreasList.length - 1; var AreaId = '';
                for (var a = 0; a <= AreasList.length - 1; a++) {

                    if (AreasList[a].AREA_ID == 'AL') {
                        AreaId = AreasList[a].AREA_ID;
                        $scope.LineDtls = GetALLineDetails(Plant_Id, Week_ID, AreaId, itemType).then(function () {
                            ALLlinesDetails = $scope.LineDtls;
                            if (ALLlinesDetails != null && ALLlinesDetails != '') {
                                dayhtmlContent2 += '<tr  style="background-color:antiquewhite"> <td style="border-right:black 1px solid;border-bottom: black 1px solid"><strong> ' + ALLlinesDetails[0].AREA_NAME + '</strong> </td> </tr>';
                                dayhtmlContent2 += '<tr  colspan="3">  ';
                                for (var j = 0; j <= ALLlinesDetails.length - 1; j++) {
                                    if (ALLlinesDetails[j].TYPE_ID == "P1") {
                                        dayhtmlContent2 += ' <td ><strong> ATS </strong></td>  <td >' + ALLlinesDetails[j].ATS + '</td>';
                                    }
                                    else {
                                        dayhtmlContent2 += ' <td colspan="3">' + ALLlinesDetails[j].ATS + '</td> ';
                                    }
                                }
                                dayhtmlContent2 += '</tr>';                                
                                dayhtmlContent2 += '</tr>';
                            }
                        })
                    }
                    else {
                        AreaId = AreasList[a].AREA_ID;
                        $scope.LineDtls = GetOtherLineDetails(Plant_Id, Week_ID, AreaId, itemType).then(function () {
                            otherlinesDetails = $scope.LineDtls;
                            if (otherlinesDetails != null && otherlinesDetails != '') {

                                if (otherlinesDetails[0].ROW_COUNT == true) {
                                    dayhtmlContent2 += '<tr> <td rowspan="1"  style="width:20%"><strong> ' + otherlinesDetails[0].AREA_NAME + ' (  ' + itemType + ' ) ' + ' </strong> </td> </tr>';
                                    dayhtmlContent2 += '<tr> <td  style="width:20%"><strong>Scheduled</strong></td> ';
                                    for (var i = 0; i <= otherlinesDetails.length - 1; i++) {
                                        if (otherlinesDetails[i].TYPE_ID == "P1") {
                                            dayhtmlContent2 += '<td>' + otherlinesDetails[i].ITEM_SCHED_CASES + '</td> ';
                                        }
                                        else {
                                            dayhtmlContent2 += '<td>' + otherlinesDetails[i].ITEM_SCHED_CASES + '</td> ';
                                        }
                                    }
                                    dayhtmlContent2 += '</tr>';
                                    ....
                                    .....                                
                                    dayhtmlContent2 += '</tr>';
                                }                           
                            }
                        })
                    }
                }
            }       
            return dayhtmlContent2;
        }));  

        $q.all(urlCalls).then(function (results) {
            deferred.resolve(results)
             alert(results[0]); alert(results[1]); 
            alert(results[2]);
            var temp = ''; temp = results[0]; temp += results[1]; temp += results[2];
            alert(temp);
            DisplayContent(temp);
            return deferred.promise;
        });
    }

并希望在执行函数insertHtml的所有3个部分之后执行以下DisplayContent函数。

 function DisplayContent(temp) {
    var content = '';       
    content = temp + '</table>';
    $scope.show = true;
    $scope.divHtmlDay = $sce.trustAsHtml(content);
} 

在每一部分中，我都将数据从数据库获取到范围变量，并且它们没有问题。

我该如何实现？

Answer 1

$q.all()的参数必须是promise对象的列表，而不是原始值。 您正在将字符串推入urlCalls 。 您应该像在注释掉的块中一样推入promise对象：

var urlCalls = [];

urlCalls.push(SomeAsyncTask().then(function(result) {
  return result;
});

urlCalls.push(SomeOtherAsyncTask().then(function(result) {
  return "Some string value " += result;
});

$q.all(urlCalls).then(resultArray) {
  $scope.contentOne= resultArray[0];
  $scope.contentTwo = resultArray[1];
  Displaycontent();
});