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;，但我确实通过$scope.data的新版本更新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文件中，这似乎有效。

闪烁数据更新Angularjs

2 个答案: