无法在 Angular 应用程序中加载 Google 图表

Question

以下是我正在加载的页面的控制器摘录（在咖啡脚本中 - 但应该易于阅读）。从服务器获得数据后，我将其转换为 json 数组数组。然后 onChartDataReady 运行，通过 jsapi 加载 3 个文件，所有文件的 http 状态均为 200，但永远不会调用 onGoogleReady。

onDataLoad: (data) =>
    # @$scope.chartData = transformed data
    @onChartDataReady()

onChartDataReady: =>
    google.load 'visualization', '1', { packages: ['corechart'] }
    google.setOnLoadCallback @onGoogleReady

onGoogleReady: =>
    chartTable = google.visualization.arrayToDataTable @$scope.chartData
    chartOptions = { title: 'Some silly data' }
    chart = new google.visualization.LineChart document.getElementById('chart_div')
    chart.draw chartTable, chartOptions            

我从 google 复制了 quickstart 代码并将其粘贴到没有控制器的 html 文件中（即 angular 只是加载 html）但它有同样的问题 - 没有调用回调。当我从桌面打开文件时，它工作正常。不知何故，角度干扰了谷歌回调，我不知道如何解决。

任何指针都会非常有帮助！谢谢。

Answer 1

这可能与 google 加载程序中的奇怪行为有关。尝试使用google.load 调用而不是调用google.setOnLoadCallback 传递内联回调。 javascript 看起来像这样：

google.load('visualization', '1', { packages: ['corechart'], callback: <callback function> });

我不是咖啡脚本专家，但我认为这是您会使用的语法：

google.load 'visualization', '1', { packages: ['corechart'], callback: @onGoogleReady }