CODEWITHSUNDEEP
angularjsangularjs-bindings
Wilco Waaijer
Wilco Waaijer

Reputation: 432

Angular view loses binding after text update

I'am trying to use mark.js to highlight text in elements rendered by Angular.

The problem i ran into was that the rendered text is updated by mark.js and Angular loses the reference to the updated text. The principes are shown in the example.

Minimal example: 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>

Is it possible to trigger a redraw after the text node is updated externally?

Update:

To make it more clear what the use case is:

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>

When you mark & unmark the text node inside <p id="targetElement"> is replaced by mark.js. Angular will not render the view again. (It does update the text node no longer referenced by the DOM)

Upvotes: 0

Views: 360

Answers (1)

Ashokkumar M. Prajapati
Ashokkumar M. Prajapati

Reputation: 493

I have don't have permission to update your plunker. solution that will work for now is plunker

Upvotes: 1

Related Questions