AngularJS 外部 ng-repeat 不在内部 ng-repeat 上注册手表 [英] AngularJS Outer ng-repeat not to register watches on inner ng-repeat

问题描述

这与我的问题有关 - Angular JS ng-repeat 消耗更多浏览器内存

This is in relation with my question - Angular JS ng-repeat consumes more browser memory

我的问题是我需要嵌套的 ng-repeat 并且嵌套的 ng-repeat 由于注册了更多的手表而消耗更多的内存.

My problem here is I need nested ng-repeats and the nested ng-repeats consumes more memory because of more watches being registered.

<table>
  <thead><td>Id</td><td>Name</td><td>Ratings</td></thead>
  <tbody>
   <tr ng-repeat="user in users | orderBy:'name' | limitTo:display_limit">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td><div ng-repeat="item in items | orderBy:'rating' | limitTo:inner_display_limit">{{item.rating}}</div></td>
   </tr>
  </tbody>
</table>

在我的例子中，外部 ng-repeat 和内部 ng-repeat 操作的对象数量可以达到 1000.正如@Liviu 在答案中指出的那样，每个外部 ng-repeat 注册手表在内部 ng-repeat 上，这会导致消耗的内存量被使用.有没有办法通过编写我们自己的自定义指令来避免外部 ng-repeat 在内部注册手表?

Here in my case, the number of objects that outer ng-repeat and inner ng-repeat operates on can go upto 1000. And as @Liviu pointed in the answer,each of the outer ng-repeat registers watch on the inner ng-repeat and that leads to consumable amount of memory being used. Is there a way we can avoid the outer ng-repeat from registering watches on inner ones by writing our own custom directive?

我的情况是在内部和外部 ng-repeats 中，我显示最初的 50 个项目并在滚动时，如果滚动到达相应 DOM 的末尾，我将限制更新 50，以便接下来的 50 个项目得到显示.

My case is in both inner and outer ng-repeats, I display the initial 50 items and on scroll, if the scroll reaches the end of the corresponding DOM, I update the limit by 50, so that the next 50 items gets displayed.

非常感谢任何帮助！

推荐答案

您可以编写一个指令，将 users 和 items 作为绑定属性(特别是因为它似乎就像您的内部循环独立于外部循环一样)，然后手动嵌套两个循环，将内容添加到 DOM，并为每个元素添加一个滚动侦听器.编码更难，但观察者要少得多.

You could write a directive that takes both users and items as bindings attributes (especially because it seems like your inner loop is independant from the outer one), then manually nest two loops that would add content to the DOM, plus adding a scroll listener to each element. It's more hard-way coding but a lot less watchers.

这篇关于AngularJS 外部 ng-repeat 不在内部 ng-repeat 上注册手表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！