지시문이 많은 JSON 파일로 전달되는 AngularJS

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 아직 거기에 없습니다 -- 그냥 돌아올 것입니다 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
  };
});