javascript - AngularJS 数据落后一步

Question

我正在使用 angularJS 跟踪 map 坐标来更新数据，但是我遇到了一个奇怪的问题，即您在屏幕上看到的数据与 console 语句不匹配。

zombie.controller("move", function($scope) {
    io.on("location", function(data) {
        console.log(data);
        $scope.location = data.loc;
    })
    $scope.move = function(direction) {
        $scope.title = ": Traveling";
        io.emit("move", {direction:direction});
    }
});

控制台将记录如下内容:Object {loc: "(59,30)"}

假设之前的数据是 Object {loc: "(60,31)"}。当控制台正在记录 (59,30) 时，我的页面将打印 (60,31)。

此外，当页面加载时，初始点击不会显示任何内容，但控制台会记录正确的数据。

我试过在 Angular 函数内部移动 io.on('location')，但如果它在 move() 内部，它会变得疯狂并记录 15连续多次并滞后。除了这个问题外，函数外没问题。有什么想法吗？

Answer 1

io.on("location") 中的代码是由 socket.io 发起的，Angular 不知道它，所以它对范围的更改直到下一个摘要才会反射(reflect)出来循环。这可能就是为什么屏幕更新总是落后一步的原因。使用 $scope.$apply() 强制摘要...

io.on("location", function(data) {
    console.log(data);
    $scope.location = data.loc;
    $scope.$apply();
})