数据更新Angularjs闪烁

Question

我有一组用户需要更新，以防数据库中的数据发生更改。为此，我从控制器调用更新函数。

在控制器中

$scope.update = function(){
    $http.get("....")
    .success(function(data){
        $scope.users = data;
    })
};

在模板中

<div ng-repeat="user in users">
  ...
</div>

在更新函数调用时可以注意到 Div 闪烁。有没有办法避免这种情况？

Answer 1

我遇到了同样的问题。正在寻找我以外的其他解决方案。大概只有这一个。

“闪烁”的根本原因是重新创建 DOM，因为您将新的普通对象分配给范围：$scope.users = data;。该对象不包含 Angular 的跟踪数据，因此引擎从一开始就启动一切。这种效果很烦人，尤其是当您对正在刷新的元素使用 CSS 动画时 - 一切都在闪烁、重置等。

我该怎么做才能避免它？我不这样做 $scope.data = data;，但我确实通过 data 的新版本更新了 $scope.data 的每个对象（在你的情况下）。

查看下面的代码。就我而言，我获取新的服务器列表，然后只应用更改。

$scope.servers = [];

$http.get('/panel/dashboard').then(function(res) {
    // find and upgrade servers
    for (var n in res.data.servers) {
        var s = res.data.servers[n];

        var l = get_server(s.id); // helper - get by ID from $scope.servers
        if (l) {
            $scope.servers.push({
                id: s.id, 
                name: s.name, 
                state: s.state
            });
        } else {
            // do update values only
            l.name = s.name;
            l.state = s.state;                
        }
    }

    // remember to remove old items that are in $scope.server and not in res.data
    // then sort data   
});

我希望它有所帮助。这里最重要的不是“如何解决”，而是了解“它是如何工作的”。

Answer 2

将 ng-cloak 指令与以下 CSS 一起添加到您的代码中：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

更多信息可以在 Angular 文档中找到——https://docs.angularjs.org/api/ng/directive/ngCloak。

文档指出 CSS 嵌入在 angular.js 文件中...但是由于我通常按照最佳实践将我的 JavaScript 加载到页面的末尾，所以闪烁仍然发生。相反，我只是将必要的 CSS 添加到我的网站 css 文件中，这似乎有效。