AngularJS + Plotly - не хочу найти мой #div

Question

Я новичок в AngularJS. Мне нужно подключить угловой скрипт к сюжету. Идея состоит в том, чтобы получить данные JSON для X и Y для Plotly. Все нормально, пока линия не будет построена. Он не находит мои divs chart0, chart1, chart2 ... и т. Д. Но они генерируются ng-repeat ($ index). Я получаю сообщение об ошибке «Нет элемента DOM с идентификатором« chart2 »существует на странице». Это мой код:

app.controller('archive', function($scope, $http) { 

var layout = { margin: { l: 40, r: 20, b: 35, t: 20, pad: 4 } } 

$http.get("json.php?module=archive").then(function(response) { 

    $scope.sensors = response.data; 

    angular.forEach($scope.sensors, function(value, key) {    
     var data = [{ x: value.x.split(","), y: value.y.split(","), type: 'scatter', name: value.name }]; 
     Plotly.newPlot("chart"+(key-1), data, layout, {displaylogo: false, showLink: false, autosize: false}); 
    }); 

}, function(response) { 
    alert("Error: "+response); 
}); 

});

Answer 1

Angular Directive будет хорошим решением этой проблемы. Директивы позволяют прикрепить код к элементам DOM, созданным динамически во время выполнения. Директивы также могут помочь вам создать модульный и многоразовый код. Последовательность создания диаграммы будет включать в себя:

1. Загрузить данные с сервера и преобразовать их в Plotly. Сохраните преобразованные данные диаграммы в переменную области видимости.
2. Используйте данные диаграммы для создания экземпляров директивы диаграммы с использованием ng-repeat, передавая данные отдельного графика в директиву.
3. Инициализируйте график Plotly в директиве, где доступны как данные, так и элемент.

Я построил упрощенную работу sample of an Angular Directive for Plotly charts, чтобы проиллюстрировать концепцию.

Но вам не нужно использовать мой немой код, вы можете проверить angular-plotly или аналогичный проект, который будет более полным.

Загрузка и преобразование данных,

$scope.loadData = function() { 
    var rawSensorData = [ 
     { 
     "name": "Chart One", 
     "x": "1, 2, 3", 
     "y": "2, 4, 6" 
     }, 
     { 
     "name": "Chart Two", 
     "x": "2, 4, 6, 8", 
     "y": "1, 2, 3, 5" 
     } 
    ]; 
    $scope.sensorChartData = rawSensorData.map(function (value, key) { 
     var data = [{ x: value.x.split(","), y: value.y.split(","), type: 'scatter', name: value.name }]; 
     return data; 
    }); 
    }; 

нг-повтор Directive в HTML

<plotly-chart chartdata="sensor" layout="layout" options="options" 
    ng-repeat="sensor in sensorChartData"> 
</plotly-chart> 

Инициализировать таблицу в директиве

testApp.directive("plotlyChart", [ 
    function() { 
    function plotlyChartLink (scope, element, attrs) { 
     Plotly.plot(element[0].firstChild, scope.chartdata, scope.layout, scope.options); 
    } 
    var directive = { 
     restrict: "E", 
     scope: { 
      chartdata: "=", 
      layout: "=", 
      options: "=" 
     }, 
     template: "<div class='chart'></div>", 
     link: plotlyChartLink 
    }; 
    return directive; 
    } 
]);