Socket.io-Ereignis wird nicht aktualisiert. Winkelgesteuertes Element

Question

Ich habe ein vereinfachtes Beispiel für das Problem unten gemacht. Im Grunde wird die Variable "this.content" nicht durch das Ereignis "socket.on" geändert (das ansonsten ordnungsgemäß funktioniert).

index.html:

<div ng-controller="gameController as game"> 
    <button ng-click="game.buttonClick()">This changes the text when clicked.</button> 
    <div>{{ game.content }}</div> 
</div> 

controller.app:

app.controller('gameController', function($scope, $http) { 
    this.content = "Default"; 

    this.buttonClick = function() { 
     this.content = "Content changes to this, when the button is clicked."; 
    }; 

    socket.on('gameFound', function() { 
     this.content = "Content doesn't change to this, when a message is emitted."; 
     console.log("This message is being logged into the console though."); 
    }); 
}); 

Auf der Server-Seite habe ich eine socket.emit ('gameFound', "Something"), die funktioniert richtig.

Ich denke, das Problem ist, dass "this.content" bezieht sich auf etwas anderes im Kontext von socket.on.

Wie kann ich den Wert von "this.content" in der Funktion socket.on ändern?

Jede Hilfe wird geschätzt.

Answer 1

Ich denke, der Kontext falsch ist, versuchen:

app.controller('gameController', function($scope, $http) { 
    var self = this; 
    self.content = "Default"; 

    this.buttonClick = function() { 
     self.content = "Content changes to this, when the button is clicked."; 
    }; 

    socket.on('gameFound', function() { 
     self.content = "Content doesn't change to this, when a message is emitted."; 
     console.log("This message is being logged into the console though."); 
    }); 
}); 

tun this.content innen socket.on eigentlich gemeint socket.content und nicht gameController.content wie erwartet.

Ein anderer Ansatz wäre ist: zu bind es Kontext ist nach außen,

socket.on('gameFound', function() { 
    this.content = "Content doesn't change to this, when a message is emitted."; 
    console.log("This message is being logged into the console though."); 
}.bind(this)); 

Wenn Sie Winkel wollen die Ansicht zu aktualisieren, wenn der Inhalt aktualisiert wird, werden Sie es manuell aufrufen müssen. Angular weiß nicht, ob der Inhalt aktualisiert wurde, da keine Interaktion mit dem DOM stattgefunden hat. Versuchen Sie stattdessen:

socket.on('gameFound', function() { 
    self.content = "Content doesn't change to this, when a message is emitted."; 
    console.log("This message is being logged into the console though."); 
    // update the view 
    $scope.$apply(); 
});