Я новичок в AngularJS, и, хотя мне нравится его набор функций, его кривая обучения была крутой. В настоящее время я работаю над созданием SVG-графика на основе данных, возвращаемых с сервера mySQL (как, конечно, JSON-объект). С помощью других сообщений stackoverflow я преодолел ошибки на основе SVG, пытаясь отобразить точки пути до того, как Angular привяжет их («точки» против «ng-points»). Тем не менее, я столкнулся с другой проблемой, которая связана с ограничением итерации Angular's при использовании ng-repeat.Как устранить ошибки angularjs из-за кругов SVG?
Мой график похож на Google Analytics: несколько полигонов и ряд кругов для каждой точки. Ниже приведен шаблон. Как и это, это приводит к ошибке итераций 10 $ digest(). Он работает визуально, но консоль показывает ошибки.
<svg width="100%" height="300" style="overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="rgb(245,245,245)" />
<polygon fill="#ddf" ng-points="{{line}}" />
<polyline fill="none" stroke="#bbe" stroke-width="3" ng-points="{{line}}" />
<g ng-repeat="point in xy">
<circle ng-cx="{{xy[$index][0]}}" ng-cy="{{xy[$index][1]}}" r="5" />
</g>
</svg>
Данные для каждой точки извлекаются из mySQL и отформатированы с использованием метода контроллера. {{line}} - это точки в виде строки. {{xy}} - это точки как массив/объект (я пробовал использовать оба) с вложенными массивами, чтобы соответствовать формату cx/cy для SVG-окружностей.
xy = [["0","300"],["100","130"],["200","109"], ...]
Моя мысль в том, что мне нужно, чтобы построить каждый круг в пределах директивы, а затем прикрепить его к элементу (или компиляции?), Но когда я пытаюсь получить доступ к массиву из в ссылке или компиляции, когда у меня есть беда. Массив (или объект) существует, и я могу открыть его с помощью console.log, но пытаясь развернуть внутри директивы, и я начинаю получать пустые строки. Так вот состояние директивы я пытаюсь использовать
directives.ngGraph = function() {
return {
restrict: 'A',
scope: {
line: "=",
xy: "="
},
replace: true,
templateUrl: 'partials/graph.html',
link: function(scope, attrs) {
console.log(scope.xy)
}
};
};
В приведенном выше сценарии входа scope.xy возвращает массив, как ожидалось, но вход scope.xy [0] возвращает пустую строку: «» ,
Итак, мой вопрос: как мне пройти через вложенный массив, связанный в атрибуте, и присоединить каждую итерацию к шаблону в формате cx/cy, который требуется кругам?