Socket.io 发出事件不更新 Angular 受控元素

Question

我为下面的问题做了一个简化的例子。基本上“this.content”变量不会被“socket.on”事件改变（否则它可以正常工作）。

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

在服务器端，我有一个 socket.emit('gameFound', "Something")，它工作正常。

我认为问题在于“this.content”指的是 socket.on 上下文中的其他内容。

如何更改 socket.on 函数中“this.content”的值？

感谢任何帮助。

Answer 1

我觉得上下文不对，试试：

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

在socket.on 中执行this.content 实际上意味着socket.content 而不是gameController.content 如您所料。

另一种方法是：bind 它是外部的上下文，

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

如果您希望 Angular 在内容更新时更新视图，则必须手动调用它。 Angular 不知道内容是否已更新，因为没有与 DOM 交互。试试这个：

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