angularjsはディレクティブヘビーJSONファイルに通過します
-
21-12-2019 - |
質問
まあ、私はチャートの問題が表示されていないと思います、そして、問題は私が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
};
});
.
おそらくこれのため、ディレクティブテンプレートは空になり、チャートは生成されません。 この問題を回避するにはどうすればいいですか?
解決
チャート作成関数を再起動する必要がある$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
};
});
. 所属していません StackOverflow