ng-quill 文本编辑器只更新一次

Question

我有一个 angular 应用程序，我正在使用 ngQuill

基本指令是通过将其注入您的应用程序并使用 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>

在我的应用程序中，我有一个模式允许用户 select 从 select 加载文档。第一次一切都很好。但是，如果我尝试加载不同的文档，ngQuill 会拒绝更新。数据被推送到其他绑定，但不是 ngQuill。我做了一个测试，看看绑定到 ngQuill 的绑定是否真的在获取数据，它是，但 ngQuill 永远不会更新。

我想也许它只需要一个 $digest，但我尝试了 $timeout 和 $apply，但什么也没有。这几乎就像它失去了绑定。有什么建议么？

如果您查看 this plunker，您可以看到问题所在。单击一个按钮，然后单击另一个 - 第一个按钮将正确加载，但之后只有标题发生变化。

该文档还有以下内容，但我不确定它是否相关或如何使用它：

if you use it in a form and you are resetting it via $setPristine() -> you have to set editor.setHTML('') -> it will add the error class only, if the model has ng-dirty class

Answer 1

为了使双向绑定始终如一地工作，我必须在 ng-quill.js 文件的指令的 link 中添加一个 $watch 函数。

基本上它所做的就是观察我是否更改附加到视图中指令的 ng-model 绑定，然后将其与编辑器当前存储在指令中的内容进行比较。如果两者不相等，则用外部文件替换内部文件。

我还添加了一个条件，如果我将外部 ng-model 绑定设置为未定义，它也会清除 ng-quill 文档。

函数如下：

$scope.$watch(function () {
    return ngModel.$viewValue;
  }, 
  function (newText) {
    if (newText && newText !== editor.getHTML()) {
      editor.setHTML(newText);
    }
    if (newText === undefined) {
      editor.setHTML('');
    }
  }
);

ng-quill 文本编辑器只更新一次

ng-quill text editor only updates once

angularjs

angularjs-directive

quill