角度視圖在文本更新後失去約束力

我試圖使用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必須是角度的。 –

角度視圖在文本更新後失去約束力

回答

相關問題