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?

Embryo

Answer 1

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

Embryo

_.throttle and _.debounce are even better solutions to performance problems that come from methods calling too often. – Roadbed

Answer 2

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

Petrosal

This solution is working, but if i turn this on, the grid is dead, the search, grouping filtering everything stops working. In a way that behavior makes sense as we are destroying the scope. But is it possible to unbind before i make changes to data and rebind scope back. Because only time I am seeing a lag in performance is when I manipulate the gridOptions.Data. – Embryo

No, you cannot have a toggleScope effect. it's either on or off, to turn it back on will be extremely hard. – Petrosal

Answer 3

You should read the documentation thoroughly. Using just bindonce won't give you the effect you want. Look at this example I've created: http://plnkr.co/edit/GXkLWfFpfdJvPVyRMtpO - $timeout is used to call $apply every second. Two elements have bindings to the same functions which logs to console the text passed as a parameter. As you can see, using just bindonce doesn't work - the just bindonce text is still being logged, whilst with bo-text appears only once. One of bo-text, bo-html etc. must be used to achieve binding only once.

So, in your case, you need to modify templates of the ngGrid directive and replace every normal binding you want with bo-* directives. Here: How to render html formatted text in ng-grid column header I've explained how to do that.

Durham

Lort, I am just having 30 rows with 20 columns in my ng-grid and deleting a row or adding takes 10 seconds which makes me concerned, my question is: my dataset is not huge but I am seeing a lag, do i have to make changes to ng-grid defaults to have it work for such small dataset. – Embryo

I've just provided information on how to use bind-once proper way, not how to solve performance issues ;) In fact, 600 watches is not a small amount (but also not huge). And it all depends on how often your app calls $apply, ie. how many timeouts, ajax calls etc. do you have. – Durham