creating svg elements with angularJS

Question

I'm trying to create an svg element with angular. Currently I'm able to do an ng-repeat but when I try to assign values to my attributes I get an error.

<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>

Interesting enough cell.node.name does work and shows the name nicelly but cell.node.x and cell.node.y, give me the following error accordingly Error: Invalid value for attribute x="cell.node.x" Error: Invalid value for attribute y="cell.node.y" Any ideas?

Answer 1

The newer versions of Angular feature ngAttr attribute bindings, which should avoid the errors caused when the browser validates before Angular kicks in.

Example (from Angular docs):

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

Answer 2

Well, it's working, here's a plunk, but you're getting that error because the browser is validating the SVG before it renders it, and at the time of validation, x and y are equal to "{{cell.node.x}}" and "{{cell.node.y}}" respectively. Once angular updates the view, it will indeed put the rectangles where they're supposed to be.

One thing I noticed though, is you're missing the width and height attributes on the rectangle, which will cause them not to show.

There aren't a lot of good ways to suppress this error. I suppose you could make a custom directive that didn't render the SVG elements until after they'd been $compiled.