Question

好吧，我认为我找到了图表没有显示的问题，问题可能是我从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
    };
});

可能因此，指令模板将被创建为空，并且不会生成图表。我该如何解决这个问题？

Answer 1

您正在使用应重新触发图表功能的$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
  };
});

AngularJS传递给指令重JSON文件

1 个答案: