如何在双向数据绑定中使用ng-bind-html？

Question

我目前正在研究一个用angular构建的简单编辑器。 主文本框只是一个div，其中contenteditable设置为true和ng-bind-html属性，如下所示：

<div contenteditable="true" ng-bind-html="field.content">HTML content here</div>

使用正确的标记设置和正确呈现该值并查看页面加载。 但由于它仅限于一种方式，我的数据或模型在编辑时不会更新。

我已经尝试了一些可疑的方法，但大多数都需要ng-model，但如果我添加我的html标签不会被渲染并转换成符号。

在更改div的内容之后，我将如何更新我的数据，并保持HTML标签等格式正确？

编辑：暂时只使用这个临时“修复”，但我想要更强大的东西。

<div contenteditable="true" ng-bind-html="field.content" 
ng-blur="saveHTML($event)"></div>

$scope.saveHTML = function(event) {
    this.field.content = event.target.innerHTML;
}

Answer 1

您可以尝试使用ngModel指令：

<div contenteditable="true"
     ng-bind-html="field.content"
     ng-model="field.content">
  HTML content here
</div>