1

I want to create a directive that hightlights text( using jquery highlight plugin), after ngRepeat has rendered all its items. Consider following html:

<div data-hightlight="" data-highlight-key="{{vm.highlight}}">
  <div data-ng-repeat="item in items">
       {{item.description}}
  </div>
</div>

If I put the highlight on the outer div, it is executed before the ng repeat has rendered, so nothing gets highlighted. If I put it on the inner div, the directive runs for each item which is highly inefficient.

I also tried checking on the $scope.$last, but then the element to which to linking function is refererring, is only the last item in the list, so only this item gets highlighted text. (I could try and get the parent element, but to me, that doesn't seem to be the best practise)

The code is inside the link function, where I watch changes on the highlightKey attribute.

P.S. vm.highlight is only set to its value after the data returns from the server

rekna
  • 5,313
  • 7
  • 45
  • 54
  • would run it within each repeater....outer div has no knowledge of `ng-repeat` within it. Might be extra funtion calls but keep in mind, angular builds a scope object for every single one of those repeated elements – charlietfl Nov 09 '13 at 18:34

0 Answers0