Question

鉴于以下代码我从Google Charts复制粘贴，（我刚删除了html，head和body代码。如果我只是在我的index.html页面中添加它，这段代码表现得非常好，条形图很好地显示。

但是，如果我将此代码作为ng-view和routeProvider机制调用的html部分插入，则根本不会显示图表，并且控制台不会抛出任何错误。

你知道我应该检查什么吗？

<div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>

我使用angularjs 1.2 rc2。

Answer 1

原因是因为在模板中编写的内联javascript未在ng-view内解析。这是一种奇怪的行为，我知道的唯一解决方案更奇怪。包括正常的jquery脚本之前，包括angular.js和...现在<script>标记被解析。魔法。

如果有人知道这个事实的可靠解释，我全都听见了。

谷歌条形图不会显示在ng-view html partials中

1 个答案: