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

Question

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

基本指令是通过将其注入(inject)您的应用并在您的 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 中选择要加载的文档。第一次一切都很好。但是，如果我尝试加载不同的文档，ngQuill 会拒绝更新。数据被推送到其他绑定(bind)，但不是 ngQuill。我做了一个测试，看看 Hook 到 ngQuill 的绑定(bind)是否真的在获取数据并且它是，但是 ngQuill 从不更新。

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

如果你查看 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

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

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

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

函数如下:

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