Создание элементов svg с угловымJS

Я пытаюсь создать элемент svg с angular. В настоящее время я могу выполнить ng-repeat, но когда я пытаюсь присвоить значения моим атрибутам, я получаю сообщение об ошибке.

<g ng-repeat="cell in row">
    <rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
    <text x="10" y="10">{{cell.node.name}}</text>
</g>

Интересно, что cell.node.name работает и показывает имя nicelly, но cell.node.x и cell.node.y, дайте мне следующую ошибку соответственно Ошибка: недопустимое значение для атрибута x = "cell.node.x" Ошибка: недопустимое значение для атрибута y = "cell.node.y" Любые идеи?

Ответ 1

В новых версиях Angular есть атрибуты атрибутов ngAttr, которые должны избегать ошибок, возникающих при проверке браузера до Angular.

Пример (из Angular docs):

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

Ответ 2

Ну, он работает, здесь plunk, но вы получаете эту ошибку, потому что браузер проверяет SVG, прежде чем он отобразит его, и во время проверки x и y равны "{{cell.node.x}}" и "{{cell.node.y}}" соответственно. Как только angular обновит представление, он действительно поместит прямоугольники, где они должны быть.

Одна вещь, которую я заметил, заключается в том, что вам не хватает атрибутов width и height на прямоугольнике, , которые не будут отображаться.

Существует много хороших способов подавления этой ошибки. Я полагаю, вы могли бы создать настраиваемую директиву, которая не отображала бы элементы SVG до тех пор, пока они не были скомпилированы.

Ответ 3

Как подсказки для блейдов: создание настраиваемых директив для атрибутов, которые вызывают проблему, останавливает ошибки в Chrome. Там есть решение в this issue в github.