Allow SVG Text to be editable in Angular?

Question

since 1.3.1 AngularJS is pretty good at SVG writing. Mostly the interaction is 1. database or some form gives data -> Angular pushes the nodes into the SVG. Now I would like to be able to not need a separate form to interact with data, but to change the value of some variable directly by clicking on the SVG text element its plotted in. I tried using contenteditable directly on the Text node, but that didn't work. Is it possible?

Answer 1

I wrote a directive: http://jsfiddle.net/michaschwab/68dtgcu3/1/ Instead of eg <text x="20" y="70" fill="red">{{foo}}</text> you use these extra tags:

<text x="20" y="70" fill="red" ng-model="foo" content-editable>{{foo}}</text>

That will automatically add a contentEditable div right on top of your Text node so you can't see it. Changing that new div will allow you to edit the model directly. There are minor bugs:

1. The style of the text node is not completely copied, so the extra div could be visible. The position would also have to be updated on window resize and so on.
2. There are some $sce bugs that I haven't taken care of. this seems to be a useful link addressing that.

Hope it helps!