在状态更改时销毁控制器范围和所有相关事件和内存

Question

我在带选项卡的 ui-router 应用程序中使用 ngHandsontable。我第一次加载选项卡 (state/route) 并呈现 tables（我在一个视图中有 5-10 tables），性能非常好。然而，一旦我离开这个视图进入其他视图（可能有也可能没有更多 handsontables），tables 的响应能力就会大大下降。不知道是什么问题，但我在想也许手表变量没有被清理？事件？内存？

这就是我使用它的方式（使用 jquery masonry 插件来堆叠 tables）

下面的代码片段是 ui-view 标签的模板：

    <div class="row">
        <div class="col-md-12">
            <div masonry>
                <div class="masonry-brick" ng-repeat="(title, group) in instrumentGroups | orderObjectBy:'sortOrder'" style="" column-width="230">
                    <div class="instrument-group">

                        <hot-table settings="{colHeaders: colHeaders, className: 'htCenter', contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: hot.afterChange, afterRender: hot.afterRender}" row-headers="false" min-spare-rows="minSpareRows" datarows="group.nodes" >
                            <hot-column data="nodeTitle" title="group.title" width="110" colspan="2" type="grayedOut" read-only></hot-column>
                            <hot-column data="quote" type="'numeric'" width="70" format="group.format"></hot-column>
                            <hot-column data="isIncluded" title="'Use'" width="50" type="'checkbox'" width="50" checked-template="true" unchecked-template="false"></hot-column>
                        </hot-table>

                    </div>
                </div>
            </div>
        </div>
    </div>

所以我在 chrome 开发工具中对 table 元素做了一些挖掘和查看 "Event Listeners"，当我在 table 元素之间切换时，我可以看到选项卡和 table 是 re-drawn，这些滚动和 visibltychange 事件的数量是两倍和三倍...这是预期的吗？

这是在状态之间切换几次之后：

当我在 ui-router 状态之间切换时，如何确保所有这些侦听器（可能还有其他变量、内存等）都被销毁？

Answer 1

报告为 ngHandsonTable Issue#157 。

Memory leak when hotTable's parent scope is destroyed.

Hi, I often use the directive inside controllers whoose scope is later destroyed. I'm not an expert but it seems that, in this case, the elements are not properly removed from the DOM which causes a memory leak. I discovered that, in the vanilla handsontable code, you can call the .destroy() method on a hot instance to remove it from the DOM so I added
element.on("$destroy", function() { scope.hotInstance.destroy(); });
at the end of hotTable's "compile" (line 584), which fixed the memory leak.

I don't know if this could break other parts of your code but I just wanted to let you know there's potential problem here.

在状态更改时销毁控制器范围和所有相关事件和内存

Destroy controller scope and all related events and memory on state change

performance

memory-leaks

angularjs

handsontable

angular-ui-router

Memory leak when hotTable's parent scope is destroyed.