范围变量未在页面加载AngularJS上加载

Question

我在我的单页应用程序中使用angular-chart.js http://jtblin.github.io/angular-chart.js/ 在我的视图之一上绘制了图表。问题是视图初始化时图表不会加载，因为数据尚未通过工厂中的 API 加载。无论我在该视图上停留多长时间，数据都不会填充。但是，如果我转到单页应用程序上的不同视图，然后返回，数据就在那里，因为它已经在工厂中加载。

据我了解，一旦从工厂加载数据，由于数据绑定，图表应该立即更新，但为什么不在第一个视图上执行此操作？

工厂（通过service.getChartData() 加载数据的地方）

app.factory('chartFactory', ['$http', function($http) {

  var service = {
    height_chart: window.innerHeight * 0.4,
    labels: [],
    series: ['GDAX Value'],
    data: [],
    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
        }]
      }
    },
    getChartData: function() {
      $http.get('/portfolio/get-chart-data')
        .then(function(response) {
          service.labels = response.data[0]
          service.data = response.data[1]
        })
    }
  }

  return service

}])

控制器

app.controller('chartCtrl', chartCtrl)
chartCtrl.$inject = ['$scope', '$interval', 'chartFactory']

function chartCtrl($scope, $interval, chartFactory) {

  var vmChart = this
  
  vmChart.height_chart = chartFactory.height_chart
  vmChart.labels = chartFactory.labels
  vmChart.series = chartFactory.series
  //this data hasn't loaded yet. 
  vmChart.data = [chartFactory.data]
  vmChart.onClick = function(points, evt) {
    console.log(points, evt)
  }
  vmChart.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }]
  vmChart.options = chartFactory.options


  chartFactory.getChartData()
  //the chart never shows up on the first view, even after the function loads the data in the factory.

}

<div ng-controller="chartCtrl as vmChart" class="chart-container">
  <canvas id="line" class="chart chart-line" chart-data="vmChart.data" chart-labels="vmChart.labels" chart-series="vmChart.series" chart-options="vmChart.options" chart-dataset-override="vmChart.datasetOverride" chart-click="vmChart.onClick" style="width:100%;">
    </canvas>
</div>

只是为了澄清 - 图表确实会加载，但直到我切换到不同的视图然后再返回。如何让图表加载。工厂加载数据后的第一个视图？

Answer 1

一个 http 请求大约需要 200 毫秒来获取数据，但 DOM 会在请求完成之前加载。所以当你第一次登陆页面时，图表数据会被填充，但只有在整个页面加载之后。

试试这个： 将 getChartData 函数设为“异步”，并在 http 请求中添加“等待”，以告知 DOM 等待请求完成。

在图表工厂中：

getChartData: async function() {
     await $http.get('/portfolio/get-chart-data')
        .then(function(response) {
          service.labels = response.data[0]
          service.data = response.data[1]
        })
    }

Answer 2

请在vm声明后添加chartFactory.getChartData()，如下-

app.controller('chartCtrl', chartCtrl)
chartCtrl.$inject = ['$scope', '$interval', 'chartFactory']

function chartCtrl($scope, $interval, chartFactory) {

  var vmChart = this
  chartFactory.getChartData()

  vmChart.height_chart = chartFactory.height_chart
  vmChart.labels = chartFactory.labels
  vmChart.series = chartFactory.series
  //this data hasn't loaded yet. 
  vmChart.data = [chartFactory.data]
  vmChart.onClick = function(points, evt) {
    console.log(points, evt)
  }
  vmChart.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }]
  vmChart.options = chartFactory.options



  //the chart never shows up on the first view, even after the function loads the data in the factory.

}