How to use ng-bind-html with two-way data binding?

Question

I am currently working on a simple editor created using angular. The main text field is only a div with contenteditable set to true and the ng-bind-html attribute, for example:

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

The value is set and displayed correctly using the correct tags and the page load is viewed. But since this is associated with only one way, I do not update the data or model when editing.

I tried some contenteditable directivs, but most of them require ng-model, but if I add that my html tags are not displayed and will not be converted to characters.

How can I update my data after changing the contents of a div, and also save HTML tags, etc. format correctly?

EDIT: just using this temporary “fix” for now, but I would like something more reliable.

 <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

You can try using the ngModel directive:

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