更改模型后AngularJS视图未更新

大安

我正在写一个基于网络的游戏,可以让您对纸牌出价并与其他玩家进行交易。对于此应用程序,我使用的是Node,Express,MongoDB和Angular。

该视图显示了玩家的化身和名字以及他们的连接状态。此连接状态保存在游戏模型中,但也可以通过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进行控制台,它似乎包含正确的连接状态。该视图根本没有响应。我试图以各种方式在不同地方实现$ scope。$ apply(),但是给我的就是' angular.js:13920错误:[$ rootScope:inprog] $ apply已经在进行中'。在$ timeout()中包装$ scope。$ apply()可以摆脱上述错误,但不能解决问题。

在花了几个小时尝试解决此问题之后,我可能遇到了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);
    }
};

现在我什至不知道该怎么办..

大安

终于修好了...

我忘记了我将指令用作“玩家”。出于懒惰的原因,我没有创建隔离的范围并传递播放器对象,而是通过以下方式将播放器对象分配给该范围:

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

    }

如您所见,甚至还有一条评论解释了我的愚蠢决定。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章