好吧,我认为我找到了图表没有显示的问题,问题可能是我从RESTful服务器加载重JSON对象并将其传递给我生成图表但json的指令仍然没有完全下载。
JSON文件几乎是1mb,我用这种方式得到了:
在控制器中:
dataArchive.get().then(function(result){
$scope.getData = result;
});
和HTML:
<divng-controller="archiveCtrl">
<data-graph get-archive-data="getData"></data-graph>
</div>
并在指令中:
var chart = function(data){
var createchart = new AmCharts.makeChart("chartdiv", {
//
});
}
var linker = function(scope, element, attrs){
scope.$watch('data', function(){
chart(scope.data);
});
}
directives.directive('dataGraph', function(){
return {
restrict: 'E',
replace: false,
scope: {
data: '=getArchiveData'
},
template: '<div id="chartdiv"></div>',
link: linker
};
});
可能因此,指令模板将被创建为空,并且不会生成图表。 我该如何解决这个问题?
答案 0 :(得分:0)
您正在使用应重新触发图表功能的$watch
,但我建议您尝试其他一些方法来查看哪些有用。
首先,即使data
尚未出现,watch函数也会触发初始指令链接 - 它只返回undefined
,因此第一次用{{undefined
调用图表函数因此,我想,渲染一个空图表。然后,当下载数据时,它将再次触发$watch
,但如果多次调用,您的图表功能可能无法工作..?如下检查:
scope.$watch('data', function(){
if (!scope.data) return
chart(scope.data);
});
当我需要等待某个变量的解析时,另一种适用于我的方法是使用$observe
,而不是将变量添加到指令的范围内:
<data-graph get-archive-data="{{ getData }}"></data-graph>
var linker = function(scope, element, attrs){
attrs.$observe('getArchiveData', function(data){
if (!data) return;
chart(data);
});
}
directives.directive('dataGraph', function(){
return {
restrict: 'E',
replace: false,
// Remove below
//scope: {
// data: '=getArchiveData'
//},
template: '<div id="chartdiv"></div>',
link: linker
};
});