0

我正在尝试使用mark.js突出显示 Angular 呈现的元素中的文本。

我遇到的问题是渲染的文本由 mark.js 更新，而 Angular 丢失了对更新文本的引用。原理如示例所示。

最小的例子：plnkr.co

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body ng-init="count=0">
    <p id="targetElement">Count: {{count}}</p>
    <p>
      <button ng-click="count = count + 1">Increase</button>
      <button onclick="targetElement.innerHTML='broken';">Break it</button>
    </p>
  </body>
</html>

文本节点在外部更新后是否可以触发重绘？

更新：

为了更清楚地说明用例是什么：

plnkr.co

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.10.0/mark.js"></script>
  </head>
  <body ng-init="count=0">
    <p id="targetElement">{{count}}</p>
    <p>
      <button ng-click="count = count + 1">Increase</button>
      <button onclick="markInstance.markRegExp(/\d/);">Mark</button>
      <button onclick="markInstance.unmark();">Unmark</button>
    </p>
    <script>
      markInstance = new Mark(targetElement);
    </script>
  </body>
</html>

当您标记和取消标记时，内部的文本节点<p id="targetElement">将替换为 mark.js。Angular 不会再次渲染视图。（它确实更新了 DOM 不再引用的文本节点）

4

1 回答 1

1

我无权更新你的 plunker。现在可行的解决方案是plunker

于 2017-05-09T09:39:48.163 回答