0

Angularjs と c3 チャート ディレクティブを使用しています。私のテンプレートコンパイルコードは

  angular.element(document.body).append($compile(template)($scope));

for ループ内のすべての promise が完了した後にのみ、このテンプレート コンパイル コードを実行したいと考えています。どうすればそれを達成できますか？また、モデル名を動的に割り当てるために $scope[data.chartIdent] を使用しましたが、正しい方法ですか? 以下は私のコントローラーのサンプルコードです。

                  var chartTabs =   [
                                   {
                                      title:' Spend',
                                      pages:[
                                         {
                                            chart_Id:0,
                                            chart_name:"C0",
                                            chart_type:"line",
                                            chart_call_name:"spendAmount"
                                         },
                                         {
                                             chart_Id:1,
                                            chart_name:"C1",
                                            chart_type:"bar"
                                            chart_call_name:"spendItems"
                                         }
                                      ]
                                   }
                                ];

            var chartArray = chartTabs .pages;

var template = '<div class= "chartsDiv">';

            for(var i = 0; i < chartArray .length; i++) {
                      var  eachChart= chartArray [i];
             var chartIdent = "chart" + i ;

              var chartPromise = dataService.getDataForC3Chart(chart_call_name);

                    chartPromise .then(function (data) {
                        $scope[data.chartIdent] = {

                                            data : {
                                                x: 'x',
                                            columns :data.columns,
                                           type : data.chart_type 
                                            },
                                            axis : {
                                                x: {
                                                    type: 'timeseries',  
                                                    tick:  format: function(value) {                                                         
                                                     var month = value.getUTCMonth() + 1;
                                                     var year = value.getUTCFullYear();
                                                     return  month + '-' + year;
                                                   }
                                                }
                                            },
                                            subchart : {
                                                show : true
                                            }

                                        };
                                }    


                        }, function (error) {
                        $scope[data.chartIdent] = {};
                            alert(error);
                        });

template += ' <div class="col"> <p class="graphtitle">' + eachDashboard.chart_name + ' </p> <c3-simple id = "chart' + i + '" config="chart' + i + '" ></c3-simple> </div>';

                }

    template += ' </div>';

angular.element(document.body).append($compile(template)($scope));

$q.all を使用して、テンプレートを動的に作成する方法。ここでは、for ループから外れているため、'i' 値はテンプレートに使用できません。 

$scope.createDashboradsforeachTab = function(eachTab) {




            var dashboardslayoutArray = eachTab.pages;
                    var promises = [];  
                    var template = '<div class= "chartsDiv">';

                for(var i = 0; i < dashboardslayoutArray.length; i++) {
                    var  eachChart= chartArray [i];
             var chartIdent = "chart" + i ;

              var chartPromise = dataService.getDataForC3Chart(chart_call_name);

      var chartPromise = dataService.getDataForC3Chart(chart_call_name);
       promises.push(chartPromise);


                }

                $q.all(promises)
  .then(function(data){
    // all promises were resolved here

                    $scope[data.chartIdent] = {
                                            data : {
                                                x: 'x',
                                            columns :data.columns,
                                           type : data.chart_type 
                                            }
                                        };
  },function(error) {
                                $scope[data.chartIdent] ={};
                                    alert(error);
                                }
                                );


    template += ' <div class="col"> <p class="graphtitle">' + eachDashboard.chart_name + ' </p> <c3-simple id = "chart' + i + '" config="chart' + i + '" ></c3-simple> </div>';



   template += ' </div>';

angular.element(document.body).append($compile(template)($scope));

                            }
4

1 に答える 1

3

すべての約束を配列に集めて使用する必要があります$q.all。

var promises = [];

for(var i = 0; i < chartArray.length; i++) {
  var chartPromise = dataService.getDataForC3Chart(chart_call_name);
  promises.push(chartPromise);
}

$q.all(promises)
  .then(function(data){
    // all promises were resolved here
  });

オフトピック: 次のようなことをしないように、Angular についてもっと読んでください。angular.element(document.body).append($compile(template)($scope));

于 2014-12-20T07:20:10.947 に答える