Question

我有这段代码：

<section infinite-scroll='load()'>
    <div class="product" ng-repeat="product in products | limitTo:total">
        ..
    </div>
 </section>

在控制器中：

$scope.products = []; // array of all products
$scope.load = function() {
   $scope.total += 5;
};

当用户滚动到底部控制器时，增加limitTo变量，这样他就会看到另外5个产品。如果 40个产品网站 4700观察者。如果他继续滚动，可能会有12k观察者..任何想法如何解决这个问题？每个产品都有各种输入，用于添加购物车操作。

我正在寻找虚拟重复（例如this），但它使用的是一个固定高度的容器，所以滚动这样的产品会很难看并且完全错误。

Answer 1

Angular会对您拥有的每个绑定表达式进行监视。您必须减少代码中绑定表达式的数量，才能看到手表数量的减少。

但是，您可以尝试使用追踪来帮助角度找出不应重新评估的内容来缓解此问题。

＆＃13;

<section infinite-scroll='load()'>
    <div class="product" ng-repeat="product in products | limitTo:total track by $index">
        ..
    </div>
 </section>

＆＃13;

为了删除不需要的手表，请考虑仅渲染用户可见的内容，并尽可能用空元素替换其他内容。

Answer 2

您没有说该列表是否应该是可编辑的。也就是说，无论如何，我认为 monster 列表（数千个元素）可编辑是不可行的。

在我正在开发的项目中，我们使用与您提供的用例相同的用例。到目前为止，在列表中有大约5000个元素，它似乎工作得很好：我们已经竭尽全力使用one-time binding并创建有效的目录，以尽快释放他们的观察者。

对于编辑，我们传递单击的元素并在单独的上下文中打开它。

angular.js ng-repeat +无限滚动导致太多观察者

2 个答案: