爲什麼我的角柵很慢？

所以，我做了一些自定義指令，它基於浮動的div繪製了一種數據網格（因爲FF中的嵌套柔性實現很糟糕 - 但這不是重點）。爲什麼我的角柵很慢？

它是如何工作的：

我通過一些通過一些數據收集的指令就像<the-grid data-list="parentController.displayedRows">
這裏面第一個指示，我必須通過一些列像<a-grid-column data-value="row.value"></a-grid-column>有很多屬性我贏了」這裏精確。
data-value值可以是一個直接表達式，綁定到指令控制器爲了顯示每列需要ng重複的行或者必須是$ 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> 
```
我在爲了快速選擇行或分頁或多個標籤頁內瀏覽一些鍵盤導航，這確實沒有什麼比選擇的行上應用一些類的更多，除了更新一些「selectedRowIndex」。
我使用angular-vs-repeat爲了在我的DOM中具有最小行數（因爲應用程序在慢速計算機上運行）。這很好。

的問題是，每次我打了一些「向上」或「向下」鍵，我的鍵盤上，角是「重繪」列表中的每一個細胞。

因此，讓我們假設我的數據列表中有200行，每行有7列。第一次加載頁面，它在renderCell()函數中傳遞〜3000次。好吧，讓我們接受（不明白爲什麼，但確定）。

我按下了向下鍵爲了去我的列表的第二行。它在renderCell()函數中傳遞〜1100次。

所以是的，結果是非常緩慢的（想象一下，如果我按下了向下的箭頭鍵以便在我的行內快速導航）...我無法接受這一點。如果有人可以向我解釋...任何幫助將被大大接受:)

如果我沒有一個指令（直接的DOM操作，與手工製作的列，而不是在一個ng重複內的指令ng-repeat），每件事都是光滑而乾淨的。

是的，我已經看到了市場上的每個角柵格。沒有人滿足我的目的，這就是爲什麼我決定創建自己的目標。

不，我真的不能給你一些JSFiddle或任何東西的時刻。整個應用程序是真正的觸手可及，隔離這是一種複雜的）。

來源

2015-04-22 Gratz44

儘量使用綁定一次（角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>

來源

2015-04-22 09:25:58 YD1m

好它似乎幫助顯著方式。我意識到單向綁定，但僅限於某些{{}}表達式，並不知道我可以將它們應用於某些ng-repeat元素或函數。下一步是要找到如何更新父列表，如果進行實時修改。我會接受這個解決方案。多謝！ – Gratz44

這更像是一個黑客。你的指令中仍然有錯誤（不希望的）。 – ABOS

好的。那麼有什麼可能是錯的？我看不出爲什麼它可能是錯的。我的實施方式不簡單嗎？ – Gratz44

爲什麼我的角柵很慢？

回答

相關問題