AngularJS обновляет HTML при обновлении массива

Question

У меня такая ситуация, в HTML я использую ng-repeat="user in controller.users" для отображения пользователей на моей странице.

В JS У меня есть:

Main.leaderboard(function(res) { 
     vm.users = res; 
    }, function() { 
     $rootScope.error = 'Failed to fetch details'; 
    }); 

После этого, когда пользователь регистр Я использую сокетов для отображения на странице в режиме реального времени:

socket.on('player joined', function(data) { 
     console.log('player ' + data.username +' joined'); 
     vm.users.push(data); 
    }); 

Я попытался с $ дайджеста, но работа доцент, она возвращает

Uncaught TypeError: vm.users.$digest is not a function(anonymous function)

Может кто-нибудь объяснить, как обновить HTML, когда vm.users является обновлением ?

Answer 1

You необходимо использовать функцию $timeout, которая гарантирует, что ваш дайджест будет работать без противоречия с другим циклом цикла работы.

socket.on('player joined', function(data) { 
    $timeout(function(){ 
     console.log('player ' + data.username +' joined'); 
     vm.users.push(data); 
    }) 
}); 

Примечание

Don't forget to add $timeout dependency inside your controller

Answer 2

Проблема в том, что розетка «выходит из мира углов».

Как сказал Pankajparkar, поставить его "в мире угловых в" с помощью $timeout:

socket.on('player joined', function(data) { 
    $timeout(function(){ // $timeout is part of Angular. You don't need to give it a delay. 
     vm.users.push(data); // Now Angular is aware of that. 
    }); 
}); 

Для того, чтобы использовать $ таймаут, вам нужно, чтобы ввести его в ваш контроллер:

myApp.controller('mainCtrl', function ($scope, $timeout){...