놀랍도록 간단한 각도/노드 응용 프로그램이 예상대로 작동하지 않습니다.

Question

각도와 노드를 사용하여 가장 간단한 응용 프로그램을 만들었습니다. 텍스트 필드에 ng 모델이있는 채팅 응용 프로그램입니다.

텍스트 필드 값이 변경되면 메시지가 내보내고 노드는이를 보냅니다. 그 값을 변수에 할당하지만, 항상 한 문자 뒤입니다. 나는 정직하게 이유를 모른다.

예를 들어, 텍스트 필드 값은 "hello world"이고 {{receive}}는 "hello worl"을 출력합니다.

내가 콘솔 값을 가지고있는 데이터를 console.log에 기록하면, 변경하지 않고 즉시 할당하고 문자가 누락됩니다. 내가 뭔가 잘못하고 있는거야?

<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

각도 기능을 사용하지 않고 바인딩을 변경하려면 $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; 
    }); 
});