CODEWITHSUNDEEP
angularjs
nathancahill
nathancahill

Reputation: 10850

Exclude div from Angular digest

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.

Upvotes: 7

Views: 942

Answers (1)

j.wittwer
j.wittwer

Reputation: 9497

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.

Upvotes: 8

Related Questions