[英]Angular Directive won't work at all in IE
这是我对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的相对较新的学习者,显然我对下一步的工作一无所知。 有人可以给我一些建议吗? 非常感谢。
澄清
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.