モデルチェンジ後にAngularJSビューが更新されない

Question

私は、カードに入札して他のプレイヤーと取引するためのWebベースのゲームを作成しています。このアプリケーションでは、Node、Express、MongoDB、Angularを使用しています。

ビューには、プレーヤーのアバターと名前、および接続状態が表示されます。この接続ステータスはゲームモデルに保存されますが、socket.io Webソケットを介してリアルタイムでも追跡されます。

プレーヤーがゲームに参加すると、サーバーはすべてのクライアントにメッセージを送信します。次に、クライアントは、ゲーム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; 
      } 
     } 
    } 
} 

はビューでは、私は単に「接続されている」にプレーヤーのアバターをバインドするので、プレイヤーは/切断を接続したときに/が非表示になりますを示しています。

今のところ、ゲームモデルは（明らかに）変更され、サーバーはクライアントに（再びソケットによって）$ 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] $がすでに適用中です。'。 Wrapping $ scope。$ timeout（）の$ apply（）は前述のエラーを取り除きますが、問題は解決しません。

これを修正しようと時間を費やした後、トンネルビジョンのケースがあるかもしれません。私を助けることができる誰にも無限の名声。

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

は、今私はさらに少ないものの何をすべきか確信している1が現在進行中でない場合..

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

これは、ダイジェストをトリガーします。そうしないと、実行中のダイジェストによってコードが更新されます。