Ng-quill text editor is updated only once
I have an angular app and I am using ngQuill
The main directive is implemented by inserting it into your application and using the tag in your HTML:
<ng-quill-editor class="" ng-model="document.doc" toolbar="true" link-tooltip="true" image-tooltip="true" toolbar-entries="font size bold list bullet italic underline strike align color background link image" editor-required="true" required="" error-class="input-error"></ng-quill-editor>
In my application, I have a modal that allows the user to select a document to download from select
. Everything works fine the first time. However, if I try to load another document, ngQuill refuses to update. The data goes into other bindings, but not ngQuill. I did a test to check if the binding is indeed bound to ngQuill and it is , but ngQuill is never updated.
I thought I might just need the $ digest, but I've tried $ timeout and $ apply and nothing. It almost looks like a loss of attachment. Any suggestions?
If you check this plunger , you can see this problem. Press one button and then the second - the first will load correctly, but then only the name will change after that.
The documentation also has the following, but I'm not sure if this is relevant or how to use it:
if you are using it in a form and you reset it with $ setPristine () -> you need to set editor.setHTML ('') -> it will only add the error class if the model has ng-dirty class
source to share
To make the two-way binding work consistently, I had to add the $ watch function to the link
directives in the ng-quill.js file.
Basically all it does is see if I can change the ng model binding bound to the directive in the view and then compares it to what the editor currently stores inside the directive. If they are not equal, it replaces the inner document with the outer one.
I also added a condition so that if I set the external ng-model binding to undefined it clears the ng-quill document as well.
Here is the function:
$scope.$watch(function () {
return ngModel.$viewValue;
},
function (newText) {
if (newText && newText !== editor.getHTML()) {
editor.setHTML(newText);
}
if (newText === undefined) {
editor.setHTML('');
}
}
);
source to share