页面加载AngularJS时未加载范围变量

我使用

angularchart.js

在我的单页应用程序中的一个视图上有一个图表。问题是视图初始化时图表不会加载，因为数据尚未通过工厂中的API加载。无论我在该视图上停留多长时间，数据都不会填充。但是，如果我在单页应用程序上转到另一个视图，然后返回，数据就在那里，因为它已经在工厂中加载了

我的理解是，一旦数据从工厂加载，图表应该立即更新，因为数据绑定，但是为什么它不在第一个视图中这样做呢

工厂（通过

服务.getChartData（）

加载数据）

app.factory（'chartFactory'，['$http'，函数（$http）{
var服务={
高度图表：window.innerHeight*0.4，
标签：[]，
系列：[“GDAX值”]，
数据：[]，
选项：{
回答：是的，
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
id:'y轴-1'，
//类型：'线性'，
显示：对，
位置：'左'，
滴答声：{
贝吉纳泽罗：错，
回调：函数（值、索引、值）{
如果（parseInt（值）>=1000）{
返回“$”+value.toString（）。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}否则{
返回“$”+值；
}
}
}
}],
xAxes：[{
显示：假
}]
}
},
getChartData:函数（）{
$http.get（'/portfolio/get图表数据'）
.然后（功能（响应）{
service.labels=response.data[0]
service.data=response.data[1]
})
}
}
回程服务
}])

请在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.

}

---

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

试试这个： 将getChartData函数设为“async”，并将“await”添加到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]
        })
    }

---

尝试将

vmChart.data

放在promise

chartFactory.getChartData（）中。然后（函数（数据）{vmChart.data=data；}

这并不能解决问题，因为代码是异步的。很抱歉，我错过了。你是对的，你必须在成功回调中使用chartFactory数据。使用chartFactory中的$q服务并返回承诺。如果你需要示例代码，请告诉我。可能是正确的答案。很遗憾，你不再处理此项目，因此无法继续测试一下。