在$ scope update上防止AngularJs内容闪烁

Question

当我$scope在控制器中更新我的喜欢时

$scope.item = "Hello";

然后整个DOM item似乎被删除,然后再次添加.这似乎很好,但如果我有一个列表items和做

$scope.items = Resource.query(); 

要更新所有项目,然后items删除所有DOM ,然后重新添加,这看起来很破碎和笨拙 - 无论如何还有这个删除,然后在$scope更新时添加DOM元素？

如果将$scope.items其子项用于多个ng-repeat语句中,因为所有这些ng-repeat部分都被删除然后重新添加,则此问题会进一步恶化.

编辑

我已经读过这个并觉得这是问题https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135

我有这么多"东西"进行的$digest只是缓慢.我正在研究一个例子,但同时想象一下这个数据的尝试

{
    {
        id: 1, 
        name: "name1", 
        something: {
            id: 10,
            name: "something10"
            else: {
                id: 15,
                name: "else15"
            }
        }
    }
}

但是有20个这样的对象都有嵌套对象 - 这似乎是个问题.有很多对象被解析并绑定到DOM,$watchers只需要很长时间就可以完成所有事情.

编辑2

我做了这个演示,也许我使用资源错了？http://plnkr.co/edit/QOickL0Dyi8jmuvG9mzN

但是这些物品每5秒更换一次,更换后它们全部消失然后重新出现.这是我遇到的问题.

Answer 1

使用ng-repeat时这是一个常见问题.为了跟踪对象,默认情况下,指令本身会为数组中的每个对象添加附加属性($$ hashkey).每当从数组中添加或删除新对象时,它就会发生相关的DOM元素.当您提到的数组被替换为新数组(例如从服务器返回)时,将删除表示前一个数组中对象的所有DOM元素,并替换为新对象的新DOM元素.这只是因为数组中的新对象没有$$ hashkey属性,即使它们在语义上可能相同.

这个常见问题的解决方案来自带有track by子句的Angular 1.2版本.您可以在这篇文章中找到更详细的解释.

在你的情况下,数组中的对象具有'id'属性,如果你可以保证它的唯一性,它是跟踪它们的一个很好的候选者.所以像这样使用ng-repeat会提高它的性能.

<div ng-repeat="item in items track by item.id">
  <!-- tpl -->
</div>