Exclude div from Angular digest

Question

I have a div with a chart that's generated outside of Angular. The div is inside an ng-repeat though, and when the scope is updated, the chart is cleared. Is there a way to prevent the div with the chart from being redrawn?

Here's my HTML:

<div ng-repeat="object in objects">
    <span>{{ object.title }}</span>
    <div class="chart"></div> <!-- This is being cleared when object changes -->
</div>

I looked into using bindonce, but my data changes, so I can't (?) use that.

To be clear, all I'm changing is an attribute like object.title. I don't expect the chart to stick around if the entire array of objects was replaced.

EDIT

Wrote a JSBin with the problem here: http://jsbin.com/jijalugu/1/edit?html,js,output

Looks like it's a filter that's causing the problem. I'm using the filter to split the objects into partitions (from this answer). Not sure why, it works correctly without the filter.

Is it unacceptable for you to redraw the chart when the scope data changes? — Lukas, Mar 13 '14 at 23:15
Yes, the scope changes frequently and the chart takes too long to render. — nathancahill, Mar 13 '14 at 23:17
Hmm... Take a look at this fiddle: http://jsfiddle.net/RUfPX/ Doesn't look like it's clearing the div when the model is changed. What is different in your situation? — Lukas, Mar 13 '14 at 23:32
Thanks @Lukas. Here's the a jsbin: http://jsbin.com/vufatapo/1/edit?html,js,output — nathancahill, Mar 14 '14 at 00:08
Actually, here's an even simpler example without charts: http://jsbin.com/jijalugu/1/edit?html,js,output — nathancahill, Mar 14 '14 at 00:23

score 8 · Accepted Answer · answered Mar 14 '14 at 01:52

8

You can use a tracking expression:

<div ng-repeat="rows in items | partition:2  track by $index" class="row">
  <div ng-repeat="item in rows">
    <b>{{ item.title }}</b>
    <div id="chart-{{item.title}}" class="chart"></div>
  </div>
</div>

Ben Nadel has an excellent blog post explaining tracking expressions and their benefits:

This feature allows you to associate a JavaScript object with an ngRepeat DOM (Document Object Model) node using a unique identifier. With this association in place, AngularJS will not $destroy and re-create DOM nodes unnecessarily. This can have a huge performance and user experience benefit.

answered Mar 14 '14 at 01:52

j.wittwer

9,497
3
30
32

I've never been this impressed with a SO answer. Thank you! That worked perfectly. I'm going to wait 2 days to accept your answer to give you a bounty. – nathancahill Mar 14 '14 at 05:03
Thanks, glad I could help. That was a great JSBin demo, by the way. – j.wittwer Mar 14 '14 at 05:54

Exclude div from Angular digest

1 Answers1