Javascript AngularJS传递到JSON文件

嗯，我想我找到了图表没有显示的问题，问题可能是我正在从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
    };
});

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

var图表=函数（数据）{
var createchart=new AmCharts.makeChart（“chartdiv”{
//
});
}
变量链接器=函数（范围、元素、属性）{
作用域：$watch（'data'，function（）{
图表（范围、数据）；
});
}
指令（'dataGraph'，function（）{
返回{
限制：'E'，
替换：false，
范围：{
数据：'=getArchiveData'
},
模板：“”，
链接：链接器
};
});

可能正因为如此，指令模板将被创建为空，并且不会生成图表。

---

如何解决此问题？

您正确地使用了

$watch

，这应该会重新触发图表功能，但我建议您尝试一些其他方法，看看哪些方法有帮助

首先，watch函数将在初始指令链接时触发，即使

数据

还不存在——它只会返回

未定义的

，因此第一次它将使用

未定义的

调用图表函数，因此，我想，呈现一个空图表。然后，当下载数据时，它将再次触发

$watch

，但如果多次调用，您的图表功能可能无法工作。。？以下检查如何：

scope.$watch('data', function(){
  if (!scope.data) return
  chart(scope.data);
});

当我需要等待某个变量的解析时，另一种适用于我的方法是使用

$observe

，而不是将该变量添加到指令的范围中：

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

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

变量链接器=函数（范围、元素、属性）{
属性$observe（'getArchiveData'，函数（数据）{
如果（！数据）返回；
图表（数据）；
});
}
指令（'dataGraph'，function（）{
返回{
限制：'E'，
替换：false，
//删除下面的
//范围：{
//数据：'=getArchiveData'
//},
模板：“”，
链接：链接器
};
});

Elisse，问题完全如您所述。我尝试了你的解决方案，但显然，使用observer函数会使chrome崩溃。无论如何，我回到$watch方法，现在我已经成功地将json对象传递给graph函数，但即使使用json对象，graph也不会被创建。我在DOM中得到了空的指令模板，控制台中没有错误。好吧，如果你能成功地看到你的链接器函数实际上已经收到了数据，那么我只能猜测问题一定在你的图表函数中的某个地方。另一种猜测是，由于您将chartdiv指定为指令模板，因此可能会出现某种竞争条件，使得图表功能无法找到显示图表的元素。尝试编写chartdiv代码，看看它是否有效——然后您就会知道问题是在指令还是在图表函数中！是的，我也这么想，我硬编码了图表id，但结果是一样的。是的，这是图表功能。令人窒息的是，铬有时会被烧制，有时不会。同时，在Firefox/Safari中，只有在我重新加载页面的情况下，才会在cleard缓存中触发。然而，图表函数编写正确，只是没有被触发。我将提出关于函数不触发的新问题。我真的不知道他为什么会这样。感谢您的帮助。以下是链接：