Question

我有一个非基于AngularJS的页面 - basic.html可以正常工作。

basic.html

<!doctype html>
<html>
<head>
</head>
<body>
    <div class="tab-container" >
                    <div id="piechart" style="width:1000px;height:470px;"></div>
    </div>
    <script src="scripts/angular.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Device', 'Hits (in millions)'],
                ['A',     89],
                ['B',      13],
                ['C',  21],
            ]);
            var options = { title: '' };
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);
        }
    </script>
</body>
</html>

然后我尝试重新组织代码（有点天真），将其放入AngularJS框架中，如下所示：

basic.html

<!doctype html>
<html ng-app = "Analytics-App" ng-controller="MainController">
<head>
</head>
<body>
    <div class="tab-container" >
                    <div id="piechart" style="width:1000px;height:470px;"></div>
    </div>

    <script src="scripts/angular.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="scripts/base.js"></script>

</body>
</html>

base.js

var myApp = angular.module('Analytics-App', []);

myApp.controller('MainController', function($scope, $interval) {

    var e = document.createElement("script");
    e.src = "https://www.google.com/jsapi";
    e.type="text/javascript";

    document.getElementsByTagName("head")[0].appendChild(e);
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
         ['Device', 'Hits (in millions)'],
          ['A',     89],
          ['B',      13],
          ['C',  21],
        ]);
        var options = {
          title: ''
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
});

显然，加载后，页面DOM会完全更改（使用chrome调试器查看时）：

<html><head><script src="https://www.google.com/uds/?file=visualization&amp;v=1&amp;packages=corechart" type="text/javascript"></script><link href="https://www.google.com/uds/api/visualization/1.0/d90be93871e947a274f6a5157bd75fb0/ui+en.css" type="text/css" rel="stylesheet"><script src="https://www.google.com/uds/api/visualization/1.0/d90be93871e947a274f6a5157bd75fb0/format+en,default+en,ui+en,corechart+en.I.js" type="text/javascript"></script></head></html>

我试图理解为什么控制器脚本无法将元素添加到页面DOM中以及为什么删除其余的页面元素。

Answer 1

请使用以下内容。

google.setOnLoadCallback(function () {  
    angular.bootstrap(document.body, ['Analytics-App']);
});
google.load('visualization', '1', {packages: ['corechart']});


var googleChart = googleChart || angular.module("google-chart",[]);

var myApp = myApp || angular.module("Analytics-App",["google-chart"]);

googleChart.directive("googleChart",function(){  
    return{
        restrict : "A",
        link: function($scope, $elem, $attr){
            var dt = $scope[$attr.ngModel].dataTable;

            var options = {};
            if($scope[$attr.ngModel].title)
                options.title = $scope[$attr.ngModel].title;

            var googleChart = new google.visualization[$attr.googleChart]($elem[0]);
            googleChart.draw(dt,options)
        }
    }
});

myApp.controller("IndexCtrl",function($scope){  
    $scope.data1 = {};
    $scope.data1.dataTable = new google.visualization.DataTable();
    $scope.data1.dataTable.addColumn("string","Name")
    $scope.data1.dataTable.addColumn("number","Qty")
    $scope.data1.dataTable.addRow(["Test",89]);
    $scope.data1.dataTable.addRow(["Test2",13]);
    $scope.data1.dataTable.addRow(["Test3",21]);
    $scope.data1.title="My Pie"
});

<!doctype html>
<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
     .bigGraph {width:500px;height:500px;float:left;}
     .mediumGraph {width:400px;height:400px;float:left;}
     .smallGraph {width:200px;height:200px;float:left;}
 </style>
</head>
<body ng-controller="IndexCtrl">
    <div google-chart="PieChart" ng-model="data1" class="bigGraph"></div>
</body>
</html>

Plunker网址http://plnkr.co/edit/5guBqC0upuCVgBtY6076?p=preview

进一步的帮助http://gavindraper.com/2013/07/30/google-charts-in-angularjs/ 和http://jrrera.github.io/angularjs/2014/04/05/a-better-way-to-integrate-angularjs-and-google-charts/

AngularJS：Controller可以在飞行中请求外部js吗？

1 个答案: