Flicker on data update Angularjs

У меня есть коллекция пользователей, которые необходимо обновить, если данные будут изменены в базе данных. Для этого я вызываю функцию обновления с контроллера.Flicker on data update Angularjs

В контроллере

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

В шаблоне

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

Div фликера можно заметить по вызову функции обновления. Есть ли способ избежать этого?

источник

2015-09-21 Shyamal Parikh

Что вы подразумеваете под «мерцанием»? Это происходит изначально, когда страница загружается в первый раз или каждый раз, когда вы вызываете метод обновления? – JanS

Использовать [ngAnimate] (https://docs.angularjs.org/api/ng/directive/ngRepeat#animations)? –

@JanS каждый раз, когда я вызываю функцию обновления –

Добавьте ng-cloak директиву тега вместе со следующим CSS:

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

Более подробную информацию можно найти на сайте угловыми документации - https://docs.angularjs.org/api/ng/directive/ngCloak.

Документы говорится, что CSS встроен в файл angular.js ... но так как я обычно, в соответствии с передовой практикой, загрузить мой JavaScript в конце страницы, мерцание все еще происходит. Вместо этого я просто добавляю необходимый CSS в мой сайт css-файл и, похоже, работает.

источник

2015-09-21 18:43:36 Jason

Я пробовал это, но не смог заставить его работать. Я где-то читал, что это работает только для загрузки первой страницы. –

У меня была та же проблема. Ища какое-то решение, кроме моего. Наверное, это единственный.

Корневой причиной «мерцания» является воссоздание 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 
});

Надеюсь, это поможет. Самое главное здесь не «как решить», а понять, как это работает ».

источник

2016-11-04 09:44:48 MarcinC

Flicker on data update Angularjs

ответ

Смежные вопросы