AngularJS模型變化

我正在寫一個基於Web的遊戲，讓你投標卡，並與其他玩家交易它們後進行查看更新不及時。對於這個應用程序，我使用Node，Express，MongoDB和Angular。AngularJS模型變化

的視圖顯示玩家的頭像和名字與他們的連接狀態一起。這種連接狀態保存在遊戲模式，但也可以通過socket.io的WebSockets跟蹤的實時性。

當玩家加入遊戲時，服務器會向所有客戶端發送消息。然後，客戶機檢查，如果消息是通過比較遊戲ID意味着他們。

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控制檯，它似乎包含正確的連接狀態。該視圖根本沒有迴應。我試圖實現$範圍。$ apply（）以各種方式和地方，但所有給我的是'angular.js：13920錯誤：[$ rootScope：inprog] $應用已在進行中'。包裝$範圍。$適用（）在$超時（）擺脫上述錯誤的，但不解決問題。

花費數小時試圖解決這一問題後，我可能有tunnelvision的情況。對任何能夠幫助我的人都有無盡的榮譽。

編輯：剛剛實現所有套接字數據通過$ 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); 
    } 
};

現在，我更不知道該怎麼做雖然..

來源

2016-11-11 Daan

終於修好了...

我忘了我是在使用指令作爲'玩家'。對於懶惰的原因，而不是創建一個孤立的範圍，通過玩家的對象，我分配的選手對象範圍按以下方式：

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); 

    }

正如你看到的，甚至有評論解釋我的愚蠢的決定。

來源

2016-11-11 20:32:15 Daan

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

    if (callback) callback(data); 
}

這將觸發一個摘要，如果一個不是目前正在進行中。否則，您的代碼將被運行摘要更新。

來源

2016-11-11 19:44:33 Andonaeus

不幸的是，這個檢查使得我的視圖完全空了。沒有要顯示的數據。 – Daan

日誌中是否有任何錯誤 – Andonaeus

沒有錯誤。只是缺乏我的觀點的迴應。 – Daan

AngularJS模型變化

回答

相關問題