Clever Geek Handbook

Angularjs: How to store HTML div content in scope variable

I have an editable div

one and I want to store the HTML content in a variable scope

scope.myText

:

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

How do I do this in Angular? Is there any directive to solve this problem? I appreciate any help, thanks.

+3


source to share


2 answers


I found a solution to this problem using the directive ng-blur

:

Controller:

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

If you want to initialize the content of the editor use this:

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


or with jquery:

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

View:

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


source


Why not use a textbox inside your div instead, you can just use ng-model on it.



0


source






More articles:


All Articles