角度视图在文本更新后失去约束力

我试图使用mark.js来突出显示由Angular呈现的元素中的文本。角度视图在文本更新后失去约束力

我碰到的问题是呈现的文本被mark.js更新，而Angular失去了对更新文本的引用。示例中显示了principes。

小例子：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不再引用的文本节点）

来源

2017-05-08 Wilco Waaijer

绑定概念背后的规则是，您不应该像您在本示例中那样自行更改html。如果您需要更改“targetElement”的html，则不要绑定任何chiled html。使用一些变量创建它。 –

你刚刚删除了具有绑定的html。你能准确地告诉你为什么改变这个孩子的HTML吗？因为这不是你的实际代码。 –

我已更新问题以更好地解释情况。就像我说的那样，mark.js是一个问题。它取代了Angular呈现的文本节点。 Angular没有注意到这一点，并且仍然更新被替换并不再在DOM中的文本节点。 –

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

来源

2017-05-09 09:39:48

谢谢，但问题在于目标元素应该能够包含具有绑定的多个（自定义）指令。应用此解决方案需要（深）复制每个元素及其所有子元素（目标元素可能多个页面）。我正在寻找更新文本节点的范围，并告诉所属范围重绘或绑定到新文本节点并进行更新。有什么经验？无论如何，感谢您的时间到目前为止！ –

对不起，无法为您提供帮助。我认为你必须使用满足mark.js目的的角度来创建自己的东西。祝你好运。请记住，只有一个修改DOM必须是角度的。 –

角度视图在文本更新后失去约束力

回答

相关问题