将范围变量绑定到divs innerhtml

Question

我有一个项目，我必须使用带有jquery富文本编辑器的angular。

我所拥有的是名为notes

的指令中的文本区域 我在<textarea class='newNote' id="newNoteText" ng-model="newnote"/>链接函数中附加jquery编辑器的

notes

$(element).find('#newNoteText').redactor();

问题在于jquery编辑器仅将textarea用作虚拟对象，因此当我提交表单newnote时，范围变量为空。

jquery编辑器做的是它创建一个带有类redactor_newNote的div，其中包含textarea中的任何内容以及html需要格式化它（粗体标签，有序/无序列表等）

所以我觉得我很聪明，我尝试动态地附加ng-model（仍在notes链接功能内）

$compile($(element).find('.redactor_newNote').attr('ng-model', 'newnote'))(scope);

这不起作用，因为ng-model不适用于div（也可能是因为我没有正确使用$ compile）

基本上我需要帮助的是弄清楚如何获取'.redactor_newNote' div的内部html并绑定到范围变量。

谢谢！

Answer 1

ngModel适用于输入元素等，因为angular有一个内置的input指令，用于将输入的值连接到模型。您可以编写自己的指令，为redactor_newNote div执行相同的操作。

The ngModelController documentation page就如何做到这一点有一个很好的例子。它使用contenteditable指令和ngModel来获取html内容。