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がまだありません。チャート。その後、データがダウンロードされたら、undefinedを再びトリガーしますが、おそらくチャート作成関数は複数回呼び出された場合は機能しません。次のチェックはどうですか：

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

.

いくつかの変数の解像度を待つ必要があるときに私のために機能するもう1つのアプローチは、undefinedを使用しており、ディレクティブの範囲に変数を追加していない：

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

.