How to use bindonce directive in ng-grid?

Question

I am having a serious performance issue in my application. I am using angular and ng-grid. After some reading for why my app is slow, I was directed to use bindonce directive to overcome potential Angular performance issues.

So I added bindonce.js in my solution and injected the directive in my module

HomeIndexModule = angular.module("HomeIndexModule", ['ngGrid', 'pasvaz.bindonce']);

and I am using as below in markup

<div class="gridStyle " bindonce data-ng-grid="gridOptions"></div>

I am not sure whether this is actually unbinding the grid.

Question 1: Has anyone undergone the process could direct me how to do this as I could find examples only for ng-repeat in the bindonce website.

Question 2: how to verify whether the bindonce is actually working?

Answer 1

I have mentioned this twice in other posts, I have created my own bind-once directive that is tiny and does a perfect job, personally i think the plugin is OVER-COMPLICATING things.

Check this out

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    };
});

<div class="gridStyle" bind-once ng-grid="gridOptions"></div>

Demo: http://plnkr.co/edit/4cBOEG?p=preview

Similar Post:

Genuinely stop a element from binding - unbind an element - AngularJS

Answer 2

This change fixed the performance lag, the change is commenting out the self.resizeOnData() in ng-grid.js line number 1420.

$scope.$on("ngGridEventData", function () {
//self.resizeOnData(temp);

Chrome event pro-filer showed this method being called too many times and looks like it is re sizing all the cells in the grid on change of data-source. I am still testing to find the side effects but till now all the previous functionalities are working and the performance was increase 5X than my previous one.

if you see this change break any thing else let me know