所以,我已经制作了一些自定义指令,它基于浮动的div来绘制数据网格(因为在FF中嵌套的flex实现很糟糕 - 但它不是重点)。
工作原理:
我通过类似<the-grid data-list="parentController.displayedRows">
在第一个指令中,我通过像<a-grid-column data-value="row.value"></a-grid-column>
之类的列来获取列,其中包含许多我在这里不准确的属性。
data-value
值可以是直接表达式,绑定到the-grid
指令控制器重复的行以显示每列,或者必须的函数为了显示parentController
的预期价值而进行$ eval- uated。
在我的<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>
我有一些键盘导航,以便快速选择一行或在分页或多个标签中导航,除了更新一些&#34; selectedRowIndex&#之外,这只是在所选行上应用某些类。 34;
我使用angular-vs-repeat以便在我的DOM中拥有最少的行div(因为应用程序在慢速计算机上运行)。这很有效。
问题在于每次我遇到一些&#34; up&#34;或&#34; down&#34;键盘上的键,Angular是&#34;重绘&#34;列表中的每个单元格。
因此,假设我的数据列表中有200行,每行有7列。首次加载页面,它在renderCell()
函数中传递~3000次。好吧,让我们接受(不要理解为什么,但好吧)。
我按下向下键才能转到列表的第二行。它在renderCell()
函数中传递了大约1100次。
所以是的,结果非常缓慢(想象一下,如果我按下向下箭头键以便在我的行中快速导航)......我无法接受。如果有人可以向我解释......任何帮助都会被大大接受:)
如果我在没有指令的情况下做同样的事情(直接DOM操作,手工制作的列而不是ng-repeat中的ng-repeat),每件事都是平滑而干净的。
是的,我已经查看了市场上的每个角度网格。没有人满足于我的目的,这就是为什么我决定创建自己的目的。
不,我真的不能给你一些JSFiddle或者其他任何东西。整个应用程序非常突发,隔离这是一种复杂的。)
答案 0 :(得分:2)
尝试使用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>