圖表無法得到響應當頁面加載第一次在離子

Question

我有一個問題，當做一個關於圖表的離子應用程序無法得到響應當頁面加載第一次與「項目1」和「紐約」作爲初始選擇的選項，如我的下面的截圖：

controller.js

.controller('DashCtrl', ['$scope', '$q', '$http', '$timeout', '$interval', '$state', '$filter', '$location', 'DOLLTYPE', 'REGION', function($scope, $q, $http, $timeout, $interval, $state, $filter, $location, DOLLTYPE, REGION) { 
    $http 
    .get('js/data2.json') 
    .then(function(region) { 

     var i = region.length -1; 

     for (i; i >= 0; i--) { 
      REGION.add(region[i]); 
     }; 

    }) 
    .catch(function(error){ 
     console.log('Error fetching region data: ', error) 
    }) 

    $http 
    .get('js/data.json') 
    .then(function(result) { 

     var i = result.length -1; 

     for (i; i >= 0; i--) { 
      DOLLTYPE.add(result[i]); 
     }; 

    }) 
    .catch(function(error){ 
     console.log('Error fetching doll data: ', error) 
    }) 

$scope.title = "Dashboard"; 


$scope.dash = []; 
$scope.datas = []; 
$scope.avg = []; 
$scope.avgy = []; 
$scope.data = [[]]; 
$scope.labels = [[]]; 
$scope.date = []; 


$scope.place = []; 
$scope.ayv = []; 

$scope.dolltype = []; 
DOLLTYPE 
    .all() 
    .then(function(dolltype){ 
     $scope.dolltype = dolltype; 
     $scope.dash2  = $scope.dolltype[0]; 
    }); 


$scope.regiontype = []; 
REGION 
    .all() 
    .then(function(regiontype){ 
     $scope.regiontype = regiontype; 
     $scope.dash1  = $scope.regiontype[0]; 
    }) 

$scope.change = function(dash1) { 
    $scope.place = dash1; 
} 

$scope.change2 = function(dash2) { 
    $scope.doll= dash2.id; 
} 


$scope.place.name = 'Please select'; 

$scope.$watchCollection('[place, doll]', function(newVal, oldVal) { 
    $scope.colours = [ 
     { // Blue 
     fillColor: 'rgba(148,159,177,0)', 
     strokeColor: 'rgba(47,64,200,1)', 
     pointColor: 'rgba(67,43,177,1)', 
     pointStrokeColor: '#fff', 
     pointHighlightFill: '#fff', 
     pointHighlightStroke: 'rgba(148,159,177,0.8)' 
     }, 
     { // Red 
     fillColor: 'rgba(77,83,96,0)', 
     strokeColor: 'rgba(200,15,9,1)', 
     pointColor: 'rgba(190,50,11,1)', 
     pointStrokeColor: '#fff', 
     pointHighlightFill: '#fff', 
     pointHighlightStroke: 'rgba(77,83,96,1)' 
     }, 
     { // Green 
     fillColor: 'rgba(77,83,96,0)', 
     strokeColor: 'rgba(18,177, 26,1)', 
     pointColor: 'rgba(80,200,11,1)', 
     pointStrokeColor: '#fff', 
     pointHighlightFill: '#fff', 
     pointHighlightStroke: 'rgba(77,83,96,1)' 
     } 
    ]; 


$http.get('js/data4.json').success(function(result) { 
    var deferred = $q.defer(); 
    $scope.dash.msg = result.message; 
    $scope.prices = result.data; 
    deferred.resolve($scope.prices); 
    angular.forEach($scope.prices,function(value,index){ 
    var values = { 
        value : value.value, 
        date : new Date(value.created_at.replace(/-/g,"/")) 
    }; 

    $scope.datas.push(values.value); 
    $scope.dash.price = $scope.datas[2]; 
    $scope.date.push($filter('date')(values.date,'dd-MMM'));  
    $scope.date.splice(2); 
    return deferred.promise;  
    })}).error(function(data, status) { 


    console.error('Error', status, data); 
    }); //End get price value 

$http.get('js/data5.json').success(function(result) { 
    $scope.averageprice = result.data; 
    angular.forEach($scope.averageprice,function(value,index){ 
    var avgvalue = { 
        average: value.average, 
        date : new Date(value.created_at.replace(/-/g,"/")) 
    }; 
    console.log (avgvalue); 
    $scope.avg.push(avgvalue.average); 
    })}).error(function(data, status) { 


    console.error('Error', status, data); 
    }); //End get average price value 

    var deferred = $q.defer(); 
    $http.get('js/data3.json').success(function(result) { 
    $scope.averageyearprice = result.data; 
    deferred.resolve($scope.averageyearprice); 
    console.log ($scope.averageyearprice); 
    $scope.avgy.push($scope.averageyearprice.yearly_average); 
    return deferred.promise; 
    }).error(function(data, status) { 


    }); //End get average year price value 

    $scope.data[0] = $scope.datas; 
    $scope.data[1] = $scope.avg; 
    $scope.data[2] = $scope.avgy; 

    $scope.labels = $scope.date; 
    console.log ($scope.data[0]); 

    $scope.series = [$scope.place.name, 'All (Average)', 'All (YTD Year)']; 
    console.log ($scope.series); // Add information for the hover/touch effect 

}) 

}]) 

HTML模板

<ion-view cache-view="false" view-title="{{title}}"> 
    <ion-nav-bar class="nav-title-slide-ios7 bar-assertive"></ion-nav-bar> 
<ion-content class="has-header"> 
     <div class="list"> 
      <div class="row item"> 
      <div class="col text-left assertive"> <select name='options' ng-model="dash2" ng-change="change2(dash2)" ng-options="DOLLtype as DOLLtype.name for DOLLtype in dolltype"> 

      </select></div> 
      <div class="col text-right assertive"> <select name='options' ng-model="dash1" ng-change="change(dash1)" ng-options="REGIONtype as REGIONtype.name for REGIONtype in regiontype"> 
      </select></div> 
      </div> 
      <div class="row item"> 
      <div class="col">Current Price</div> 
      <div class="col text-right assertive">{{dash.price}} %</div> 
      </div> 
      </br> 
      <div class="row item" id="container"> 
       <div class="col text-center"> 
         <p>{{dash.msg}}</p> 
       <canvas id="line" class="chart chart-line" data="data" labels="labels" series='series' height="100" legend="true" colours="colours"></canvas> 
       </div> 
       </div> 
    </ion-content> 
</ion-view> 

我爲我的應用使用angular chart plugin。任何人都可以幫我解決這個問題嗎？請檢查此鏈接full example code。

Answer 1

您的圖表指令綁定到data（和labels ...）。

data設置在$scope.$watchCollection裏面，手錶place和doll。

這些二，依次改變只在$scope.change和$scope.change2

而且這2種方法都只能稱爲你的NG-變化。除非您更改下拉菜單，否則data未定義。

如果您手動撥打$scope.$watchCollection中的代碼，則應該能夠解決部分問題。