2015-06-22 3 views
5

Ho un setup client-server socket.io con AngularJS in esecuzione sul client.Il messaggio Socket.IO non viene aggiornato. Variabile angolare

// 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); 
}); 
}); 

Come osservato, esso emette essenzialmente un message eventi con i dati memorizzati nella variabile msg.

E quindi ho il seguente codice cliente.

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; 
    }); 
}); 

Ora mi trovo di fronte a un problema strano. Quando scrivo il seguente snippet di codice per stampare frontEnd, non viene visualizzato. Ma il console.log(msg); funziona e mi mostra i dati emessi dalla variabile msg.

<body ng-app="AdminApp"> 

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

</body> 

Qualcuno mi può aiutare?

risposta

8

È necessario completare la modifica del modello (modifica delle proprietà su $scope) con $scope.$apply(function() {}) per aggiornare la vista.

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; }); 
     }); 
    }); 

$ applica() viene utilizzata per eseguire un'espressione in angolare dall'esterno quadro angolare. (Ad esempio dagli eventi DOM del browser, setTimeout, XHR o librerie di terze parti). Poiché chiamiamo in il framework angolare, dobbiamo eseguire il ciclo di vita dell'ambito corretto della gestione delle eccezioni , eseguendo gli orologi.

dalla Gazzetta Angular Documentation

+0

Ha funzionato benissimo. Grazie mille :) –

+0

Salvato la mia giornata. Grazie – sand

0

Questo è probabilmente perché socket.on('message', function (msg) {.. è fuori di conoscenza angolare. è qualcosa che accade al di fuori dell'angolare.

Poi, se si o qualcosa al di fuori del angolare allora dovete dire al angolare per aggiornare dato che ci sono qualcosa di aggiornare

uso $scope.$apply() dopo la $scope.frontEnd = msg;

O più preferibilmente avvolgerlo nella $timeout come,

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

ecco un buon motivo per explanation$timeout è più pre trasferibili.