Value in editor is not updated when model is modified about ng-quill HOT 13 CLOSED

there is already a $timeout if something changed.
View value is also updated.

$timeout(function () {
$scope.modelLength = editor.getLength();
setClass();
ngModel.$setViewValue(editor.getHTML());
}, 0);

it works well in my projects.

Maybe you have a scope issue.
Put you model on a nested object like:
ng-model="data.myModel"

from ng-quill.

Maybe I did something wrong. Here is my code :

<textarea class="form-control" rows="3" ng-model="elt.myHTML"></textarea>
<ng-quill-editor ng-model="elt.myHTML" toolbar="true"></ng-quill-editor>

It's in a directive which displays a form for the elt :

<elt-form elt="crud.data.form"></elt-form>

Anyway, when I edit the textarea, the editor is not updated...
Any idea on where I'm wrong ?

from ng-quill.

Looking closer at your code, it seems that you put the editor value when it's created (with the timeout).
But if you change the value externally, the editor is not updated.
I will try to solve this tomorow :)

from ng-quill.

It is set 1-time in the watcher to set the initial value in the editor (thats why making setHtml)
After that i am listening to the editor.on('text-change')-event. To set correct modelViewValue...

it works in my project really well.

But i only get the value from the controller once (from database) -> after that i change the value in the editor -> send the value to the database.

But my model is a nested object ;).
That was it.

from ng-quill.

Ah okay.. now i see your example.

No it will not work in that way. because in most cases you have the editor and you are changing the model in "one-direction" -> editor changes the model

You are trying to change the value in the editor from another text-input.
Set your default value in your controller on your model.

from ng-quill.

Yes !
It's the way controller -> editor after the first time...

My use case is a crud where I have a list of items and when I click on one, I show the form to edit it. The form view is toggled with ng-show so the editor is not destroyed when I change from selected item.
For now, my workaround is to use ng-if to destroy and recreate the form but it's just a workaround.

I will look to update editor content on model change.

Thanks for your quick responses :)

from ng-quill.

You may try something like that:
After the editor instance is created "$scope.$emit('editorCreated', editor);" triggers.

So you can catch the editor in your controller and if -> your model changes use editor.setText or setHtml to update the editor content.

from ng-quill.

because i do not get any answer in time.. i close the issue. you can reopen if you have any other problems related to this.

from ng-quill.

Hi!
I tried to use the API methods to update programatically the editor content, but when I change the model to a empty string and use editor.setHtml to update the content, I got the error below:

ionic.bundle.js:25642 Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.4.3/$rootScope/inprog?p0=%24apply
    at ionic.bundle.js:13380
    at beginPhase (ionic.bundle.js:29512)
    at Scope.$apply (ionic.bundle.js:29256)
    at b.<anonymous> (ng-quill.js:306)
    at b.f.emit (quill.min.js:6)
    at b.emit (quill.min.js:9)
    at a.checkUpdate (quill.min.js:7)
    at b.setHTML (quill.min.js:9)

It works, but always get the error in console log.

EDIT
Sorry for my mistake. The below "solution" is wrong.. with timeout, the cursor not works as expected!!

I resolved it problem by wrapping the code (line 306) inside $timeout:

$timeout(function () {
    $scope.$apply(function () {
        // Calculate content length
        $scope.modelLength = editor.getLength();
        // Check if error class should be set
        if (oldChange) {
            setClass();
        }
        var setValue;
        if (config.save === 'text') {
            setValue = editor.getText();
        } else if (config.save === 'contents') {
            setValue = editor.getContents();
        } else {
            setValue = editor.getHTML();
        }
        // Set new model value
        if(editor.getLength() <= 1) {
            ngModel.$setViewValue('');
        } else {
            ngModel.$setViewValue(setValue);
        }
    });
});

Let me know if I am doing something wrong.
Thank you!

from ng-quill.

wrapping $timeout and $scope.$apply should not be done.

Could you show me, how you are using the API to set the value?

from ng-quill.

I have a modal with ngquill.

<div class="editor-wrapper">
    <ng-quill-editor data-tap-disabled="true" style="height:400px !important;" class="selectable" ng-model="vm.editorText" toolbar="true" toolbar-entries="size bold list bullet italic underline align color"></ng-quill-editor>
</div>

The first time when page is loaded, everything works well.
Scenario:

1. Open the modal;
2. Write some text in ngquill;
3. Save the doc

But I need add more documents or edit the older one. So I open the modal again.

function openAddModal(id) {

    //Clear the model.
    //If I set a white space (" ") instead a empty string, I don't need to use the API method (setHtml), because the editor updates!
    //I was using this workaround to clear the model and the editor, but I realized that when I paste some text with "Ctrl + V", the model does not update without typing anything.
    vm.editorText = ""; 

    //New doc
    if(id == null) {    
        //Clear the editor.
        //Here I got the error
        editor.setHTML('<div></div>'); 
        vm.modalNewDocument.show();
    } else { 
        //get the document...
        vm.editorText = vm.document.content;
        vm.modalNewDocument.show();
    }
}

from ng-quill.

try to wrap only

editor.setHTML('<div></div>');

in $timeout

from ng-quill.

Thank you!!!
It worked very well! :D

from ng-quill.