AngularJS ng-href and svg xlink

Question

I\'d like some input on using xml namespaced attributes with angular.

The problem is angular comes with a couple of directives to handle writing attributes such as h

Answer 1

I ran into a similar problem when trying to output a value for xlink:href that's tied to the model. Based on the user's chosen in a control, I was trying to show a dynamic SVG icon via the xlink:href attribute of the element.

I found a thread about this in the GitHub Issues for AngularJS. Based on the discussion there, it appears that because a viable workaround exists, they've effectively tabled a fix by moving it to the Backlog milestone.

What ultimately worked for me was inspired by this JSBin:

http://jsbin.com/sigoleya/1/edit?html,js,output

Here's the code I used in my template:

Given a category.iconName of icon-music, for example, Angular sets the xlink:href dynamically to #icon-music, which references the element further up on the same page.

As others have noted, what's key is setting a blank xlink:href="" attribute on the element where you call the ngHref directive. Attribute order does not seem to matter. Using ng-attr-xlink:href="{{xxx}}" (as mentioned in Derek Hsu's answer) did not work for me.

All of this assumes Angular 1.3.36.

0 讨论(0)

查看其它7个回答

发布评论: