Question

我有一个有角度的应用程序，我正在使用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中选择要加载的文档。一切都很好，第一次。但是，如果我尝试加载其他文档，则ngQuill拒绝更新。数据被推送到其他绑定，但不是ngQuill。我做了一个测试，看看连接到ngQuill的绑定是否实际上是获取数据而它是，但是ngQuill永远不会更新。

我想也许它只需要一个$ digest，但我试过$ timeout和$ apply而且没什么。这几乎就像是失去了约束力。有什么建议？

如果您查看 this plunker ，则可以看到此问题。单击一个按钮，然后单击另一个 - 第一个按钮将正确加载，但之后只有标题更改。

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

如果您在表单中使用它，并且您通过$ setPristine（）重新设置它 - ＆gt;你必须设置editor.setHTML（''） - ＆gt;如果模型具有ng-dirty类
，它将仅添加错误类

Answer 1

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

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

我还添加了一个条件，这样如果我将外部ng-model绑定设置为undefined，它也会清除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文本编辑器只更新一次

1 个答案: