Question

我正在尝试使用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>

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

Answer 1

我没有权限更新您的plunker。现在可以使用的解决方案是plunker

文本更新后角度视图失去绑定

1 个答案: