지시문이 많은 JSON 파일로 전달되는 AngularJS
-
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
, 이므로 처음으로 차트 함수를 다음과 같이 호출합니다. 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
};
});
제휴하지 않습니다 StackOverflow