AngularJS：在指令中将数据连接到模型

Question

我的目的是在页面上显示一些数据，并在模型中反映出对它的任何更改。 但是，数据需要在显示之前应用特定的操作，并保持与模型的连接。

例如，如果数据是html片段，则将其包装在具有contentEditable属性的DIV中。 但是，如果它是一组选项，我会将其包装在UL和LI中，每个都包含一个带有contentContentable属性的SPAN。

在每种情况下，contentEditable零件都应保持与模型的连接。

我正在JSFiddle上尝试进行一些尝试（从该项目是html片段的情况开始），并标记了当前卡住的点（2）和（3）。 尝试去：

a) Get the watch function to notice a change to the content
b) Maintain the two way binding between the displayed editable content and the model

我的小提琴在这里： http : //jsfiddle.net/rAXmV/

我将如何处理此问题的任何建议将不胜感激。

编辑

我一直在研究使用$ compile生成输出结构，并且看起来确实正在传递相关数据。但是，它仍然与模型断开连接：

http://jsfiddle.net/xRQ7M/

编辑2

经过更多的黑客攻击后，我对提供的HTML中的contenteditable区域有了一个有效的实现。 它吸收了焦点上的变化，这是我发现从处理过的html的contenteditable区域冒出来的唯一方法。

一个更永久的JSFiddle在这里： http : //jsfiddle.net/donovanh/q6auY/

Answer 1

您可以使用ngModelController指令来修改模型中的数据，并保持模型的数据绑定。