AngularJS вид не обновляется после смены модели

Question

Я пишу веб-игру, которая позволяет вам делать ставки на карточках и торговать ими с другими игроками. Для этого приложения я использую Node, Express, MongoDB и Angular.

В представлении показаны аватары и имена игроков вместе с их статусом соединения. Этот статус соединения сохраняется в игровой модели, но также отслеживается в режиме реального времени через socket.io websockets.

Когда игрок присоединяется к игре, сервер отправляет сообщение всем клиентам. Затем клиент проверяет, предназначено ли для них сообщение, сравнивая идентификатор игры.

socketService.on("playerConnection", function(data) { 
    if (data.gameId === gameId) { 
     handlePlayerConnection(data); 
    } 
}); 

Если сообщение предназначено для нашего клиента, данные передаются функции «handlePlayerConnection».

function handlePlayerConnection(data) { 
    if ($scope.game) { 
     for (var i = 0; i < $scope.game.players.length; i++) { 
      if ($scope.game.players[i].user.id === data.userId) { 
       $scope.game.players[i].isConnected = data.connected; 
      } 
     } 
    } 
} 

В представлении, я просто привязать игрока аватар «IsConnected», так что он показывает/скрывает, когда игрок соединяется/отсоединяется.

Время от времени игровая модель изменяется (очевидно), и сервер сообщает клиентам (опять же, по сокету) обновить $ scope.game.

Приведенный ниже код показывает, как обновляется $ scope.game.

function getGame(gameId, callback) { 
    gameService.getGame(gameId, function(err, data) { 
     if (!err) { 
      $scope.game = data; // Set game 

      if (callback) callback(data); 
     } 
    }); 
} 

На данный момент, вид в основном заморожены. Он полностью перестает реагировать на соединение и отсоединение проигрывателя. Обновление браузера или контроллера устраняет проблему.

Я зарегистрировал $ scope.game.players для консоли и, похоже, содержит правильные состояния соединения. Вид просто не отвечает. Я попытался реализовать $ scope. $ Apply() различными способами и местами, но все, что дает мне, это «angular.js: 13920 Ошибка: [$ rootScope: inprog] $ apply уже выполняется '. Обтекание $ scope. $ Apply() в $ timeout() избавляется от вышеупомянутой ошибки, но не решает проблему.

Проведя часы, пытаясь исправить это, я мог бы иметь случай туннелирования. Бесконечная преданность любому, кто может мне помочь.

EDIT: Только что реализовано, что все данные сокетов обрабатываются через $ rootScope.apply(). Полный код:

var socket = io.connect("http://localhost:8180/"); 
return { 
    on: function(eventName, callback) { 
     socket.on(eventName, function() { 
      var args = arguments; 
      $rootScope.$apply(function() { 
       callback.apply(socket, args); 
      }); 
     }); 
    }, 
    emit: function(eventName, data, callback) { 
     socket.emit(eventName, data, function() { 
      var args = arguments; 
      $rootScope.$apply(function() { 
       if (callback) { 
        callback.apply(socket, args); 
       } 
      }); 
     }) 
    }, 
    off: function(eventName) { 
     socket.off(eventName); 
    } 
}; 

Теперь я даже меньше, что делать, хотя ..

Answer 1

Наконец установил его ...

Я забыл, что я использовал директиву как "игрока. Для ленивых причин, вместо того, чтобы создать изолированную область применения и передачи объекта игрока, я назначил объект игрока к области следующим образом:

link: function(scope, elem, attrs) { 
     /* 
      Decided not to use an isolated scope because the 
      player directive needs access to the $rootScope. 
      The solution below eliminates the need of said scope. 
     */ 
     scope.player = scope.$eval(attrs.player); 

    } 

Как вы видите, есть даже комментарий объясняя свое идиотское решение.

Answer 2

if (!$scope.$$phase) { 
    $scope.game = data; // Set game 

    if (callback) callback(data); 
} 

Это вызовет дайджест, если один не в настоящее время. В противном случае ваш код будет обновляться в текущем дайджесте.