Angular.js：如何将 div HTML 内容存储在范围变量中

Question

我有一个可编辑的 div，我想将 HTML 内容存储在 scope 变量 scope.myText 中：

<div id="editor" contenteditable="true" ng-model="myText">
    <p>HTML Text</p>
</div>

如何在 Angular 中做到这一点？有没有解决这个问题的指令？感谢您的帮助，谢谢。

Answer 1

我使用ng-blur 指令找到了解决此问题的方法：

控制器：

$scope.updateModel = function(){
    $scope.myText = angular.element(editor).html();
    //if you are using jquery use this line:
    //$scope.myText = $('#editor').html();
};

如果要初始化编辑器内容，请使用：

angular.element(editor).html('<p>initial content</p>'); 
//thanks to @PatrickGrimard

或使用 jquery：

$('#editor').html('<p>initial content</p>');

查看：

<div id="editor" contenteditable="true" data-ng-blur="updateModel()">
    <p>HTML Text</p>
</div>
{{myText}}

Answer 2

为什么不在你的 div 中使用 textarea，然后你可以在它上面使用 ng-model。