如何在 ng-grid 中使用 bindonce 指令？答案

【问题标题】：How to use bindonce directive in ng-grid?如何在 ng-grid 中使用 bindonce 指令？
【发布时间】：2013-10-25 18:22:41
【问题描述】：

我的应用程序存在严重的性能问题。我正在使用角度和 ng-grid。在阅读了为什么我的应用程序运行缓慢之后，我被指示使用 bindonce 指令来克服潜在的 Angular 性能问题。

所以我在我的解决方案中添加了 bindonce.js 并将指令注入到我的模块中

HomeIndexModule = angular.module("HomeIndexModule", ['ngGrid', 'pasvaz.bindonce']);

我在标记中使用如下

<div class="gridStyle " bindonce data-ng-grid="gridOptions"></div>

我不确定这是否真的解除了网格的绑定。

问题 1：有没有人经历过这个过程，可以指导我如何做到这一点，因为我只能在 bindonce 网站上找到 ng-repeat 的示例。

问题2：如何验证bindonce是否真正起作用？

【问题讨论】：

标签： javascript performance angularjs angularjs-directive ng-grid

【解决方案1】：

我在其他帖子中提到过两次，我创建了自己的 bind-once 指令，它很小并且做得很好，我个人认为插件过于复杂。

看看这个

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    };
});

<div class="gridStyle" bind-once ng-grid="gridOptions"></div>

演示：http://plnkr.co/edit/4cBOEG?p=preview

类似帖子：

Genuinely stop a element from binding - unbind an element - AngularJS

【讨论】：

这个解决方案有效，但如果我打开它，网格就死了，搜索、分组过滤一切都停止工作。在某种程度上，当我们破坏范围时，这种行为是有意义的。但是在我对数据进行更改并重新绑定范围之前是否可以取消绑定。因为只有在我操作 gridOptions.Data 时才会看到性能滞后。
不，您不能使用 toggleScope 效果。它要么打开要么关闭，重新打开将非常困难。

【解决方案2】：

此更改修复了性能滞后，更改是注释掉 ng-grid.js 行号 1420 中的 self.resizeOnData()。

$scope.$on("ngGridEventData", function () {
//self.resizeOnData(temp);

Chrome 事件分析器显示此方法被调用了太多次，并且看起来它正在调整网格中所有单元格的大小以更改数据源。我仍在测试以找出副作用，但到目前为止所有以前的功能都可以正常工作，并且性能比我以前的功能提高了 5 倍。

如果您看到此更改破坏了其他任何内容，请告诉我

【讨论】：

_.throttle 和 _.debounce 是解决因方法调用过于频繁而导致的性能问题的更好解决方案。

【解决方案3】：

您应该仔细阅读文档。仅使用 bindonce 不会给您想要的效果。看看我创建的这个例子：http://plnkr.co/edit/GXkLWfFpfdJvPVyRMtpO - $timeout 用于每秒调用$apply。两个元素绑定到相同的函数，这些函数记录以控制作为参数传递的文本。如您所见，仅使用 bindonce 不起作用 - just bindonce 文本仍在记录中，而 with bo-text 仅出现一次。 bo-text、bo-html等其中之一只能实现一次绑定。

因此，在您的情况下，您需要修改 ngGrid 指令的模板，并将您想要的每个普通绑定替换为 bo-* 指令。这里：How to render html formatted text in ng-grid column header我已经解释了如何做到这一点。

【讨论】：

Lort，我的 ng-grid 中只有 30 行 20 列，删除一行或添加需要 10 秒，这让我很担心，我的问题是：我的数据集并不大，但我看到滞后，我是否必须更改 ng-grid 默认值才能使其适用于如此小的数据集。
我刚刚提供了有关如何正确使用 bind-once 的信息，而不是如何解决性能问题；）事实上，600 块手表不是一个小数目（但也不大）。这完全取决于您的应用调用$apply 的频率，即。您有多少次超时、ajax 调用等。