为什么我的 angular 网格这么慢？

Question

因此，我创建了一些基于浮动 divs 绘制数据网格的自定义指令（因为 FF 中的嵌套 flex 实现很糟糕 - 但这不是重点）。

工作原理：

我通过类似 <the-grid data-list="parentController.displayedRows">
在这第一个指令中，我通过类似 <a-grid-column data-value="row.value"></a-grid-column> 的列有很多属性，我不会在这里精确说明。
data-value 值可以是直接表达式，绑定到 the-grid 指令控制器正在 ng-repeating 以显示每一列的行，或者必须进行 $eval-uated 才能显示 parentController.
在我的 <the-grid> 指令控制器中，我有我的网格渲染模板，它生成嵌套的 ng-repeat div（第一个在数据行上-集合，列中的第二个，在指令中创建），它看起来像：
```
<div data-ng-repeat="row in list">
    <div data-ng-repeat="cell in theGridColumns"
         data-ng-bind-html="renderCell(row, cell)">
    </div>
</div>
```
我有一些键盘导航，以便快速 select 一行或在分页或许多选项卡中导航，这只不过是在 [= 上应用一些 class 74=]ed行，另外更新了一些"selectedRowIndex".
我正在使用 angular-vs-repeat 以便在我的 DOM 中获得最少的行 div（因为该应用程序是运行在慢速计算机上）。这很好用。

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.

那么，假设我的数据列表中有 200 行，每行有 7 列。第一次加载页面，它在 renderCell() 函数中传递了 ~3000 次。好吧，让我们接受吧（不太明白为什么，但是好吧）。

我按下向下键以转到列表的第二行。它在 renderCell() 函数中传递了约 1100 次。

所以是的，结果非常慢（想象一下如果我按下向下箭头键以便在我的行中快速导航）...我不能接受。如果有人可以向我解释......任何帮助都会被大大接受:)

如果我在没有指令的情况下做同样的事情（直接 DOM 操作，用手工制作的列而不是在 ng-repeat 中的 ng-repeat 中），每件事都是顺利和干净的。

是的，我研究了市场上的每个 angular 网格。没有人满足我的目的，这就是为什么我决定创建自己的。

不，我现在真的不能给你一些 JSFiddle 或任何东西。整个应用程序真的很触手可及，将其隔离有点复杂）。

Answer 1

尝试使用一次bind (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>

为什么我的 angular 网格这么慢？

Why is my angular grid so slow?

performance

datagrid

angularjs

angularjs-directive

angularjs-ng-repeat