AngularJS传递给指令重的JSON文件

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
  };
});