ng-Model is not updating from a nicEdit formatted Textarea

Question

<scirpt src="textarea.js"></script>
<script>
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 200}).panelInstance('area');
});
</script>

<p>
   <textarea name="area" id="area" style="height:200px;" 
             ng-model="text" wrap="true">
   </textarea>
</p>
<p id="comment-text">{{text}}</p>

Here i used a paragraph to review the text entered by the user, but the model is not showing any text entered ! when i remove the id attribute of textarea, it starts working. Can anyone propose me a solution ?

Answer 1

This is a little workaround, but should work for you. You can add event listener for keyup, which will update the textarea as you type (nicEditor by default only updates on form submit). Also, you need to trigger input event in order for ng-model to update.

<script>
var areaEditor;
bkLib.onDomLoaded(function() {
    new nicEditor({maxHeight : 200}).panelInstance('area');

    document.addEventListener("keyup", function(){
        nicEditors.findEditor('area').saveContent()
        var event = new Event('input', {});
        document.getElementById('area').dispatchEvent(event);
    });
});


</script>