javascript - What's the angular way to handle redraws? -

i'm making charting application allows create graphs using drag , drop interface.

i have highcharts , i'm using highcharts-ng directive.

this directive watches title, options, , series. , when person makes change, process them , make changes options object. highcharts-ng redraws chart.

the problem i'm finding change few properties in row such options.xaxis , options.yaxis, , whenever application lagging bit because it's launching redraw every change.

so angular way approach this, while still being efficient?

a potential solution thought of add flag highcharts-ng directive, , have trigger whenever it's changed. , change after i'm done processing data. potential solution listen event inside highchart-ng directive, , trigger redraw whenever event received. these solutions seem/feel bit hacky me.

angular own dirty checking , (ideally always, not really) rewrites angular-controlled sections of dom whenever corresponding view models change. think behaviour fundamental angular if don't it, you'd either better work around it, or use different databinding framework.

the workaround i'd recommend described in first option: view model inside view model. have private variable inside directive's scope tracks changes you're interested in, ones happen more want redraw. when you're ready redraw (you'll need own logic determines "ready"...time? particular kind of change? particular threshold of change?), update real view model setting private variable original field on real view model.

code sketch:

// (inside directive)  var _options = $scope.options;  // ... // rapidfire updates happen; save them _options rather $scope.options  // ... // you're ready redraw:  $scope.options = _options; // angular knows $scope dirty , triggers redraw