AngularJS 数据落后一步答案

【问题标题】：AngularJS Data One Step BehindAngularJS 数据落后一步
【发布时间】：2014-04-01 03:56:01
【问题描述】：

我正在使用 angularJS 跟踪地图坐标以更新数据，但是我遇到了一个奇怪的问题，即您在屏幕上看到的数据与 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 次并滞后。除了这个问题外，功能都很好。有什么想法吗？

【问题讨论】：

您使用的是哪个浏览器？我知道在 Chrome 中；如果您扩展/钻入对象，则对象属性的值将是扩展时间而不是日志时间的值。您是否尝试过单步执行代码？

标签： javascript angularjs sockets

【解决方案1】：

io.on("location") 中的代码是由 socket.io 发起的，Angular 并不知道它，因此它对范围的更改直到下一个摘要周期才会反映。这可能就是为什么屏幕更新总是落后一步。使用$scope.$apply() 强制进行摘要...

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

【讨论】：

【解决方案2】：

我同意上述答案，但在某些情况下，例如在输入文本框时，

你需要给计时器来正确消化它。

setTimeout(function(){
    $scope.apply();
}, 50);

这解决了我的问题。

【讨论】：