nykon nykon - 23 days ago 11
AngularJS Question

svg and angularjs - a simple ngClick example

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

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

Comments