Why is my angular grid so slow?

Question

So, I have made some custom directive which draws kind of a data-grid, based on floated divs (because nested flex implementation in FF sucks - but it's not the point).

How it works :

• I pass some data collection to the directive via something like <the-grid data-list="parentController.displayedRows">

• Inside this first directive, I have columns via something like <a-grid-column data-value="row.value"></a-grid-column> with many attributes I won't precise here.

• The data-value value can be a direct expression, bound to the row on which the the-grid directive controller is ng-repeating in order to display each columns, or a function which have to be $eval-uated in order to display the intended value from the parentController.

• In my <the-grid> directive controller, I have the rendering template of my grid which make a nested ng-repeat div (first one on the rows of the data-collection, second one on the columns, created in the directive), it looks like :

  <div data-ng-repeat="row in list">
      <div data-ng-repeat="cell in theGridColumns"
           data-ng-bind-html="renderCell(row, cell)">
      </div>
  </div>
  

• I have some keyboard nav in order to quickly select a row or navigate within pagination or many tabs, which does nothing more than applying some class on the selected row, in addition to update some "selectedRowIndex".

• I'm using angular-vs-repeat in order to have the minimum of row divs in my DOM (because the app is running on slow computers). This works well.

The problem is that every time I'm hitting some "up" or "down" key on my keyboard, Angular is "redrawing" EVERY cells of the list.

So, let's suppose I've 200 rows in my data list, and 7 columns for each rows. First load of the page, it passes ~3000 times in the renderCell() function. Ok , let's accept that (don't really understand why, but ok).

I hit the down key in order to go to the second line of my list. It passes ~1100 times in the renderCell() function.

So yes, the result is very slow (imagine if I let the down arrow key pressed in order to quick navigate within my rows)... I can't accept that. If someone could explain that to me... Any help would be greatly accepted :)

If I make the same thing without a directive (direct DOM manipulation, with columns made by hand and not in a ng-repeat within a ng-repeat), every thing is smooth and clean.

Yes, I've look into every angular grid on the market. No one is satisfying me for my purpose, that's why I've decided to create my own one.

And no, I really can't give you some JSFiddle or anything for the moment. The whole app is really tentacular, isolating this is some kind of complicated).

Answer 1

Try to use bind once (angular 1.3+)

<div data-ng-repeat="row in ::list">
    <div data-ng-repeat="cell in ::theGridColumns"
         data-ng-bind-html="::(renderCell(row, cell))">
    </div>
</div>