AngularJS SVG-safe binding still throws error

[ilanbiala]

Using this binding:

<path ng-attr-d="{{arcPath}}" fill="none" stroke="green" stroke-width="30"></path>

I still get the error:

Error: Invalid value for <path> attribute d="" on line 2791 of angular.js.

[btford]

Please:

1. Provide a reproduction via jsbin, plnkr.co, or jsfiddle.
2. Note the version of Angular with the issue.
3. Check that the problem persists after updating Angular.

This saves us a lot of time. Thanks!

[ilanbiala]

http://jsfiddle.net/RN5zL/

Using the latest version of Angular (1.3.0-beta17). It seems that the issue doesn't goes away even if I do $scope.arcPath = ""; when the controller loads.

[caitp]

hmm, it wouldn't add too much code to support the allOrNothing feature for ngAttr_, or maybe it would make sense to just always use allOrNothing for ngAttr_. What do you think?

[caitp]

Note that ngAttr* isn't suitable for all SVG attributes, particularly case-sensitive ones containing uppercase letters, which unfortunately is a thing =( We don't have perfect solutions for the XML craziness

[ilanbiala]

Can you elaborate a little bit about the allOrNothing for ngAttr* and on the case-sensitive issue? I'm not very familiar with SVG and the ngAttr* directive.

[caitp]

actually, I'm not sure allOrNothing would work in this case --- we want the Attributes object to not apply the attribute if the value is undefined, but I'm not sure Attributes really cares.

Anyways, SVG is really an XML dialect, and XML has some features which HTML doesn't have, like case-sensitivity. So attributes like viewBox can have problems with angular because we assume it needs to look like view-box and set the attribute wrong. Because of this, ng-attr-* won't work in all cases for XML

[ilanbiala]

Ah okay. In any case, the attribute is just the letter 'd', so that shouldn't be the problem.

[caitp]

http://jsfiddle.net/D4UN5/ working version of the original fiddle using the new feature, although I think it might work in the old one already too, lets see...