2015-06-22 21 views
5

Ich habe ein socket.io Client-Server-Setup mit AngularJS, das auf dem Client ausgeführt wird.Socket.IO Nachricht aktualisiert keine Winkelvariable

// Server.js 
var io = require('socket.io')(server); 


io.on('connection', function (socket) { 
socket.on('message', function (msg) { 
    //console.log(msg); 
    console.log(msg); 
    io.emit('message', msg); 
}); 
}); 

wie beobachtet, gibt es im Wesentlichen ein message Ereignisse mit den in den Variablen msg gespeicherten Daten.

Und dann habe ich den folgenden Client-Code.

var container = angular.module("AdminApp", []); 

container.controller("StatsController", function($scope) { 

    var socket = io.connect(); 

    socket.on('message', function (msg) { 
     console.log(msg); 
     $scope.frontEnd = msg; 
    }); 
}); 

Ich bin jetzt mit einem seltsamen Problem konfrontiert. Wenn ich das folgende Code-Snippet schreibe, um frontEnd zu drucken, wird es nicht angezeigt. Aber die console.log(msg); funktioniert und es zeigt mir die Daten von der Variable msg emittiert.

<body ng-app="AdminApp"> 

    <div ng-controller="StatsController"> 
     <p>{{frontEnd}}</p> //Doesn't show anything 
    </div> 

</body> 

Kann mir jemand helfen?

Antwort

8

Um die Ansicht zu aktualisieren, müssen Sie die Änderung des Modells (Ändern der Eigenschaften auf $scope) mit $scope.$apply(function() {}) umbrechen.

var container = angular.module("AdminApp", []); 

    container.controller("StatsController", function($scope) { 

     var socket = io.connect(); 

     socket.on('message', function (msg) { 
      console.log(msg); 
      $scope.$apply(function() { $scope.frontEnd = msg; }); 
     }); 
    }); 

gilt $() wird verwendet, um einen Ausdruck in Winkeln von außerhalb der der Winkelrahmens auszuführen. (Zum Beispiel aus Browser-DOM-Ereignissen, setTimeout, XHR oder Bibliotheken von Drittanbietern). Da wir in das eckige Rahmenwerk aufrufen, müssen wir den richtigen Umfangslebenszyklus von Ausnahmebehandlung durchführen, Uhren ausführend.

Von der offiziellen Angular Documentation

+0

Arbeitete genial. Vielen Dank :) –

+0

Mein Tag gerettet. Vielen Dank – sand

0

Dies ist wahrscheinlich, weil socket.on('message', function (msg) {.. aus Winkel Wissen. es passiert etwas außerhalb des Winkelstücks.

Dann, wenn Sie o etwas außerhalb des Winkels dann müssen Sie die Winkeln sagen, da es zu aktualisieren ist etwas

Verwendung $scope.$apply() nach dem $scope.frontEnd = msg;

Oder bevorzugten wickeln Sie es in der Aktualisierung $timeout wie

$timeout(function() { 
    $scope.frontEnd = msg; 
}); 

hier ist ein guter explanation warum $timeout mehr Pre ist erträglich.

Verwandte Themen