angularJS服务对象属性undefined

Question

我有一个控制器使用服务chartFactory.chartData属性给一些数据来查看。问题在于工厂在返回对象之前chartFactory.chartData函数有时间从后端返回数据，所以属性未定义。

我知道这是一个异步问题，但我不知道如何处理它在工厂和控制器之间。

chartFactory.js

app.factory('chartFactory', ['$http', '$interval', function($http, $interval) { 
 
    var service = { 
 
    get chartData() { 
 
     $http.get('/portfolio/get-chart-data') 
 
     .then(function(response) { 
 
      console.log(response.data, 'response data') //logging after undefined message 
 
      return response.data 
 
     }) 
 
    } 
 
    } 
 
    return service 
 
}])

chartController.js

app.controller('chartCtrl', function($scope, $timeout, $http, chartFactory) { 
 
    $scope.chartData = chartFactory 
 
     $scope.height_chart = window.innerHeight * 0.4 
 
     $scope.labels = chartFactory.chartData[0]; //undefined 
 
     $scope.series = chartFactory.chartData['GDAX Value']; //undefined 
 
     $scope.data = [ 
 
     chartFactory.chartData[1] //undefined 
 
     ]; 
 
     $scope.onClick = function(points, evt) { 
 
     console.log(points, evt); 
 
     }; 
 
     $scope.datasetOverride = [{ 
 
     yAxisID: 'y-axis-1' 
 
     }]; 
 

 
     $scope.options = { 
 
     responsive: true, 
 
     maintainAspectRatio: false, 
 
     scales: { 
 
      yAxes: [{ 
 
      id: 'y-axis-1', 
 
      // type: 'linear', 
 
      display: true, 
 
      position: 'left', 
 
      ticks: { 
 
       beginAtZero: false, 
 
       callback: function(value, index, values) { 
 
       if (parseInt(value) >= 1000) { 
 
        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
       } else { 
 
        return '$' + value; 
 
       } 
 
       } 
 
      } 
 
      }], 
 
      xAxes: [{ 
 
      display: false 
 
      }] 
 
     } 
 
     } 
 
})

Answer 1

更改您的控制器，

chartFactory.chartData().then(function(response) { 
    $scope.labels = getchartData .response.data[0]; 
    $scope.series = chartFactory.response.data['GDAX Value']; 
});