圖表不在頁面導航上呈現

Question

我有一個列表頁面（List.Html），其中可以選擇n行，以便在圖表中直觀顯示行數據（使用C3）。

這是通過點擊導航到一個新的頁面（Chart.Html）按鈕（compareList（））來完成。問題在於圖表未顯示在新頁面上，可能是因爲圖表數據在頁面加載之前加載，這意味着找不到圖表需要插入的HTML。

如果圖表頁面在列表頁面之前加載，則會生成圖表，但只會在點擊後生成圖表一次，但隨後丟失。

Controller.js

$scope.compareList = function(){ 
    var total = $scope.array.length; 
    var tempArray= []; 
    for(var i=0; i<total; i++){ 
     if($scope.array[i].selected){ 
     tempArray[i] = $scope.array[i]; 
     } 
    } 
    if(comparr.length>0){ 
     $scope.compGraph(tempArray); 
    } 
    } 


$scope.compGraph = function(array){ 
var tempData = []; 
for(var i=0; i<array.length;i++){ 
    tempData.push([array[i].name,array[i].evi]); 
} 

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     columns: tempData, 
     type:'bar' 
    } 
}); 

$state.go('eventmenu.compare'); 

} 

List.Html

<ion-view view-title="List"> 
     <ion-nav-buttons side="right"> 
      <button class="button button-icon icon ion-stats-bars" ng-click="compareList()"></button> 
     </ion-nav-buttons> 
     <ion-content> 
      <ion-item ng-repeat="item in items" class="item-remove-animate"> 
       <div class="row" > 
        <div class="col col-40"{{ item.name }}</div> 
        <div class="col col-30" style=";">{{ item.area}}m<sup>2</sup></div> 
        <div class="col col-20" style=";">{{ item.value}}</div> 
        <div class="col col-10 col-top" ><ion-checkbox style="border:none;margin-top: -20px;" ng-model="item.selected"></ion-checkbox></div> 
       </div> 
      </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-view> 

Chart.HTML

<ion-view view-title="Land Comparison"> 
    <ion-content ng-controller="Controller"> 
     <div class="padding"> 
       <div id="chart" ></div> 
     </div> 
    </ion-content> 
</ion-view> 

Answer 1

我使用ng-if圖表。設置聽取加載情況的值並使用它。

在HTML：

<div class="padding"> 
    <div ng-if="isDataLoaded" id="chart"></div> 
</div> 

在控制器：

$scope.isDataLoaded = false; 

function loadData(){ 
    $scope.myData = [1,2,3]; 
    $scope.isDataLoaded = true; 
}