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

Question

I have this code:

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

In controller:

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

When an user scrolls to the bottom controller increases limitTo variable so he would see 5 more products. If there are 40 products site has 4700 watchers . If he keeps scrolling there might be even 12k watchers.. Any ideas how to fix that? Each product has various inputs for adding to cart action.

I was taking a look for virtual repeat(eg this ), but it's using a container with fixed height so it would be ugly and completely wrong to scroll products like that.

Answer 1

Angular will place a watch on every binding expression that you have. You'll have to reduce the number of binding expressions in your code to see a decrease in the number of watches.

However you can try to alleviate the problem by using track by to help angular figure out what shouldn't be re-evaluated.

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

In order to remove unneeded watches consider rendering only what is visible to the user and replacing everything else with empty elements if possible.

Answer 2

You don't say whether the list is supposed to be editable or not. That said, I don't think a monster list (thousands of elements) editable is feasible anyway.

In a project I'm working on we have the same use case as the one you present. So far, with about 5000 elements in the list, it seems to be working great: We have gone to great lengths to use one-time binding s and create efficient directories which frees up their watchers as quickly as possible.

For editing we pass on the element which is clicked on and open that in a separate context.