AngularJS передает файл директивы тяжелого JSON

Question

Что ж, я думаю, что обнаружил проблему, когда диаграмма не отображается, и проблема, вероятно, в том, что я загружаю тяжелый объект JSON с сервера RESTful и передаю его в директиву, в которой я генерирую диаграмму, но json еще не загружен полностью.

Размер файла JSON составляет почти 1 МБ, и я получаю его следующим образом:

В контроллере:

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 его еще нет - он просто вернется 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
  };
});