My journey into learning AngularJS has led me to successfully create a web application using Google Charts and Angular. Everything was running smoothly in Firefox and Chrome until I decided to test it in Internet Explorer (IE) and discovered that my project was completely broken.
A helpful resource I utilized for the Angular aspect of my project can be found at this link:
Upon testing the code in IE, I noticed that the DOM element where the chart should appear remained empty, leading me to believe that the directive was not activating. The crucial parts of the code are...
The directive;
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();
}
});
}
}
});
and the div where the populated in index.htm;
<div google-chart="ColumnChart" ng-model="dataModel.visual" trigger="activateChart"></div>
Although my version of the code derived from the provided link is more advanced, it essentially follows this method of instantiation. This issue occurs in all versions of Internet Explorer, including Edge and 11. As a beginner in AngularJS, I am unsure of how to proceed next. Any advice would be greatly appreciated. Thank you.