angularjs - 防止 AngularJs 内容在 $scope 更新时闪烁

Question

当我更新我的 $scope就像在 Controller 中一样

$scope.item = "Hello";

然后是 item 的整个 DOM似乎被删除然后再次添加。这看起来不错，但如果我有 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 个这样的对象都带有嵌套对象——这似乎是问题所在。有太多对象被解析并绑定(bind)到 DOM， $watchers只是需要很长时间才能完成所有事情。

编辑 2

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

但是这些项目每 5 秒更换一次，在更换时它们都会消失然后重新出现。这是我遇到的问题。

Answer 1

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

这个常见问题的解决方案出现在 Angular 1.2 版本中，带有 track by 子句。您可以在 this 中找到更详细的解释。邮政。

在您的情况下，数组中的对象具有“id”属性，如果您可以保证它的唯一性，它是跟踪它们的良好候选者。所以像这样使用 ng-repeat 会提高它的性能。

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