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

时间:2014-08-05 23:09:25

标签: javascript html angularjs angularjs-directive angularjs-scope

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

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

我怎么能在Angular中做到这一点?有没有解决这个问题的指令?感谢您的帮助,谢谢。

2 个答案:

答案 0 :(得分:2)

我使用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}}

答案 1 :(得分:0)

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