Angular Directive在IE中根本不起作用

Question

這是我對angularjs的首次嘗試，我已經成功使用google圖表和angular構建了一個可在Firefox和Chrome中運行的Web應用程序。 我希望今天能完成這個項目，但是我並沒有在IE中對其進行測試，所以我發現它在IE中已完全損壞。

我用來幫助我處理事物的角度方面的鏈接是此鏈接。

http://jrrera.github.io/angularjs/2014/04/05/a-better-way-to-integrate-angularjs-and-google-charts/

當我在IE中嘗試代碼時，應該去圖表的DOM元素根本沒有填充，我的結論是該指令未激活。 這里的兩個關鍵代碼是...

指令；

app.directive("googleChart",function(){  
    return{
        restrict : "A",
        link: function($scope, $elem, $attr){
            var model;

            // Function to run when the trigger is activated
            var initChart = function() {

                // Run $eval on the $scope model passed 
                // as an HTML attribute
                model = $scope.$eval($attr.ngModel);

                // If the model is defined on the scope,
                // grab the dataTable that was set up
                // during the Google Loader callback
                // function, and draw the chart
                if (model) {
                    var dt = model.dataTable,
                        options = {},
                        chartType = $attr.googleChart;

                    if (model.title) {
                        options.title = model.title;
                    }

                    var googleChart = new google.visualization[chartType]($elem[0]);
                    googleChart.draw(dt,options)
                }
            };

            // Watch the scope value placed on the trigger attribute
            // if it ever flips to true, activate the chart
            $scope.$watch($attr.trigger, function(val){
                if (val === true) {
                    initChart(); 
                }
            });

        }
    }
});

以及將在index.htm中填充的div;

  <div google-chart="ColumnChart" ng-model="dataModel.visual" trigger="activateChart"></div>

盡管我從上面的鏈接獲得的該代碼版本更高級，但從根本上講，它使用的是這種精確的實例化方法。 這在Internet Explorer的所有版本（包括Edge和11）上都會發生。作為AngularJs的相對較新的學習者，顯然我對下一步的工作一無所知。 有人可以給我一些建議嗎？ 非常感謝。

Answer 1

澄清

var loadGoogle = ChartService.loadGoogleVisualization();

    // If the Google Loader request was made with no errors, 
    // register a callback, and construct the chart data
    // model within the callback function
    if (loadGoogle) {

        google.setOnLoadCallback(function() {

            $scope.dataModel.visual.dataTable = new google.visualization.DataTable();

            // Set up the dataTable and columns
            var dataTable = $scope.dataModel.visual.dataTable;
            dataTable.addColumn("string","Date")
            dataTable.addColumn("number","Minutes")

            // Populate row data
            dataTable.addRow(["3/1/14",5]);
            dataTable.addRow(["3/2/14",13]);

            // Update the model to activate the chart on the DOM
            // Note the use of $scope.$apply since we're in the 
            // Google Loader callback.
            $scope.$apply(function(){
                $scope.activateChart = true;    
            });
        });  
    }

成為

google.load("visualization", "1", {packages:["corechart"], callback: drawChart});       


    $scope.dataModel.visual.dataTable = new google.visualization.DataTable();
    // Set up the dataTable and columns
    var dataTable = $scope.dataModel.visual.dataTable;
    dataTable.addColumn("string","Date")
    dataTable.addColumn("number","Minutes")

    // Populate row data
    dataTable.addRow(["3/1/14",5]);
    dataTable.addRow(["3/2/14",13]);

    // Update the model to activate the chart on the DOM
    // Note the use of $scope.$apply since we're in the 
    // Google Loader callback.
    $scope.$apply(function(){
        $scope.activateChart = true;    
    });