Description
I am running into a bizarre memory leak with custom cellTemplates. Basically, I am setting the column definitions after some data comes in from AJAX. The cell template has a binding that calls a function to format the data for display at runtime- So like this-
var template = '<div class="cell-full" style="height:' + rowHeight
+ 'px;" ng-click="showComplexEntityModal(row.entity,\'' + target + '\',\'' + property.identifier + '\',\'' + property.name + '\',\'' + property.type + '\',\'' + property._cms.select + '\')"><span>{{formatDisplay(row.entity,\'' + property.identifier + '\')}}</span></div>';
//push the def
columnDefs.push({
field: property.identifier,
displayName: property.name,
enableCellEdit: false,
resizeable: false,
cellTemplate: template
});
$scope.formatDisplay = function(entity, identifier) {
return "some modified string";
}
Since the data is coming in from AJAX we are using one table, but rebuilding the columnDefs with the new data. So if Data Set 1 is loaded, for every row formatDisplay is called twice. Now the crazy part- if you switch to Data Set 2, then back to Data Set 1- formatDisplay is called like 30 times per row. And it keeps growing for every context switch.
Additionally, every time the browser window is resized, the function is called. It seems that maybe ng-grid is creating a ton of references to that scope function with every re-draw and not cleaning them up? How can this be avoided?