Javascript Angular.js：如何在scope变量中存储div HTML内容

我有一个可编辑的

div

，我想在

scope

变量

scope中存储HTML内容。myText

：

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

HTML文本

---

我怎样才能做到这一点呢？有没有解决这个问题的指令？感谢您的帮助。

为什么不在div中使用文本区域，然后您可以在其上使用ng模型。

我使用

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

angular.element（editor.html（“初始内容”）；
//感谢@PatrickGrimard

或者使用jquery：

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

$（“#编辑器”）.html（“初始内容”
”；

视图：

HTML文本

{{myText}}

不，我不能使用textarea，因为div是所见即所得编辑器，它不使用textarea。您可以使用angular.element（）获取div，然后调用.html（）获取内容并将其存储在范围内。谢谢，但如何使用angular.select实现这一点？在文档中angular.select指的是HTML组件。我不确定您指的是什么。我在给解决方案提建议。所见即所得叫什么？因为tinymce和ckeditor也有angular插件，但不确定它有多完整。或者，如果您只需要一个轻文本所见即所得（wysiwyg）就更好了—您看到的html控件（如文本、输入等）实际上都是指令，因此ng模型可以工作。没有针对div的指令。嗨@Dylan，我正在使用SnapEditor，我已经使用ng blur实现了一个适合我的程序。谢谢你的建议，我会看一看。你考虑过这个吗？是的，但我需要一个带有浮动工具栏的编辑器，因此我使用SnapEditor，谢谢

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