javascript - 如何使用 angularjs 延迟加载 google jsapi 图表？

Question

我有一个单页应用程序，但有不同的选项卡。 我只想为一个选项卡显示 google charts。我不想直接包含和加载图表 js 文件 jsapi，但前提是访问特定选项卡。

因此我必须动态添加js如下:

var script = document.createElement('script');
script.src = '//http://www.google.com/jsapi?ext.js';
document.body.appendChild(script);

问题:如何检测js何时加载完毕，以便继续如下操作？

if (whenJspaiLoaded()) {
    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart); //my custom function
}

Answer 1

这是我的实现

    <style>
    .preloader {
        height:350px; background:url(images/719.gif) left no-repeat;
    }
    </style>
    <div id="columnchart_material"><div class="preloader">&nbsp;</div></div>
<script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }">
</script>
    <script>
google.setOnLoadCallback(drawChart);

      function drawChart() {
    var chart = new google.visualization.LineChart(document.getElementById('columnchart_material'));
                options.title='English'
                options.series[1].lineWidth = 0;
            chart.draw(data,options );
}
    </script>

密码本 click here