允许在Angular中编辑SVG文本？

Question

自1.3.1以来AngularJS非常擅长SVG编写。主要是交互是1.数据库或某种形式给出数据 - ＆gt; Angular将节点推入SVG。现在我希望能够不需要单独的表单来与数据交互，而是通过单击其绘制的SVG文本元素直接更改某个变量的值。我尝试直接在Text节点上使用contenteditable，但是没用。有可能吗？

Answer 1

我写了一条指令：http://jsfiddle.net/michaschwab/68dtgcu3/1/ 而不是例如<text x="20" y="70" fill="red">{{foo}}</text>你使用这些额外的标签：

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

这将自动在Text节点顶部添加contentEditable div，以便您无法看到它。更改新的div将允许您直接编辑模型。有一些小错误：

1. 文本节点的样式未完全复制，因此可以看到额外的div。该位置还必须在窗口调整大小等上更新。
2. 我还没有照顾到一些$ sce错误。 this似乎是解决此问题的有用链接。

希望它有所帮助！