read-only flag does not work properly

[rumartcer]

Hello! I need to watch some info in my project and then set read-only to true in some cases. But it's not working ignoring the value of the read-only attribute. Example in plunkr.

[KillerCodeMonkey]

just checkout my demo: https://killercodemonkey.github.io/ng-quill/demo.html search for readonly it is working quite well there.

[rumartcer]

Yes, in your example everything works. But in my plunker value of read-only attribure is set to true in $watch function (right after $init, but before quill initialization: you can open console and make sure of it). This is another case when readonly does not work. After some research I found out that problem is in this code in $onChanges hook:

if (editor && changes.readOnly) {
  editor.enable(!changes.readOnly.currentValue)
}

The code in plunker is executed in the following sequence:

1. $onInit hook of my component is called, vm.readOnly is set to its initial value (false);
2. $onChanges hook of ng-quill is called, and does almost nothing, because quill has not been initialized and editor variable is undefined;
3. $onInit hook of ng-quill is called, and sets readonly field in config variable to false;
4. $postLink hook of ng-quill is called, and schedules _initEditor function calling;
5. $watch function of my component is called and sets vm.readOnly to true;
6. $onChanges hook of ng-quill is called, and does nothing once more, because quill is still not initialized. But it had to set readOnly field in config variable because of changes in (5)
7. _initEditor function of ng-quill is called, and quill is initialized with wrong readOnly value

[KillerCodeMonkey]

yep and that is something you should avoid.

just change your code a little bit and use timeout:

$scope.$watch('doesntMatterWhat', function() {
  $timeout(function () {
    vm.readOnly = true;
    console.log('Flag changed!')
   })
})

or just wait for the editor to be created, so use the onEditorCreated callback.

all in all you should avoid watchers ;)