svg and angularjs - a simple ngClick example

Question

I have a simple problem (I hope). I would like to bind so to say svg element and angularjs. Here how the problem looks like:

<svg> <g ...> <text ... ng-click="count=count+1" ng-init="count=0">Click me!</text></g></svg>

outside <svg> I have the following code:

count: {{count}}

I would like to clik on "Click me!" and see how many clicks did I make. That does not work. I see no result, my question is why? This is nothing more then the example from the AngularJs webpage: ngClick example from AngularJs.

When I use that example without/outside <svg> (let say with button - like it is in official AngularJs webpage):

<button ng-click="count = count + 1" ng-init="count=0"> Click me! </button>

The AngularJs does his work. Are there any restrictions regarding <svg> and AngularJs? or perhaps I have to use some trick to use it?

Great thanks in advance for any tip or help!

nykon

Answer 1

Angular directives will work just fine inside of SVG. See the below code, using your ng-click function:

count: {{count}}
<svg width="100" height="100">
  <circle ng-click="count=count+1" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG with angular ng-click example in plunker: http://plnkr.co/edit/KvHKa68oZ6YxQIJzyIXG?p=preview

Answer 2

Note that, to be accessed by javascript, loaded SVG files follow the same set of rules as other contents. that means Same origin Policy may cause some troubles if you load your SVG from a different domain or a FILE source (that means your code MAY start working if you put it on a server like localhost)

To access / reference SVG nodes you can use certain javascript libraries like Raphaël.js, although you can use straight java-script as well

hope it helps