أنغولارجس يمر إلى التوجيه الثقيلة جسون ملف

Question

حسنا ، أعتقد أنني وجدت مشكلة الرسم البياني لا تظهر ، والمشكلة هي على الأرجح أنني تحميل كائن جسون الثقيلة من خادم ريستفول وتمريرها إلى التوجيه حيث أنا توليد الرسم البياني ولكن جسون لا يزال لم يتم تحميلها كلي.

ملف جسون هو ما يقرب من 1 ميغابايت ، والتي أحصل عليها بهذه الطريقة:

في المراقب المالي:

dataArchive.get().then(function(result){
    $scope.getData = result;
});

و هتمل:

<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 ليس هناك حتى الآن will سوف يعود فقط 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
  };
});