非常简单的角度/节点应用程序无法按预期工作

Question

我使用 angular 和 node 制作了最简单的应用程序。它是一个在文本字段上有一个 ng-model 的聊天应用程序。

当文本字段值发生变化时，会发出消息并由节点发送出去。我将该值分配给一个变量，但它总是落后一个字符。老实说，我不知道为什么。

例如，文本字段值为“hello world”，{{receive}} 打印出“hello worl”。

更糟糕的是，当我控制台记录它具有完整值的数据时，我立即分配它而不改变它，并且它缺少一个字符。我是不是做错了什么？

<p>{{receive}}</p>
<input ng-model="msg"></input>
<script>

var app = angular.module('app', []);
app.controller('chat', ['$scope',

function($scope) {
   var socket = io.connect();
    $scope.msg = '';
    $scope.receive = '';

        $scope.$watch('msg',function(){
            socket.emit('send message', $scope.msg);
        });

        socket.on('new message', function(data){
            console.log(data);
            // console.logging results in the entire message
            $scope.receive = data;
        });

}]);

</script>

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

server.listen(3000);

app.get('/', function(request, response){
    response.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function(socket){

    socket.on('send message', function(data){
        io.sockets.emit('new message', data);
    });

});

Answer 1

在 Angular 函数之外更改绑定时，您需要使用 $scope.$apply 更新绑定。

socket.on('new message', function(data){
    console.log(data);
    // console.logging results in the entire message
    $scope.receive = data;
    $scope.$apply();
});

它也可以像这样使用，它捕获函数内部抛出的任何错误并无论如何更新。

socket.on('new message', function(data){
    console.log(data);
    // console.logging results in the entire message
    $scope.$apply(function () {
        $scope.receive = data;
    });
});