Socket.IO 消息不更新 Angular 变量答案

【问题标题】：Socket.IO message doesn't update Angular variableSocket.IO 消息不更新 Angular 变量
【发布时间】：2015-09-07 17:26:11
【问题描述】：

我有一个 socket.io 客户端-服务器设置，AngularJS 在客户端上运行。

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

正如观察到的，它本质上会发出一个message 事件，其中的数据存储在变量msg 中。

然后我有以下客户端代码。

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

我现在面临一个奇怪的问题。当我编写以下代码 sn-p 打印frontEnd 时，它没有显示出来。但是console.log(msg); 有效，它向我展示了变量msg 发出的数据。

<body ng-app="AdminApp">

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

</body>

谁能帮帮我？

【问题讨论】：

标签： javascript angularjs node.js sockets

【解决方案1】：

您需要用$scope.$apply(function() {}) 包装模型的更改（更改$scope 上的属性）以更新视图。

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

$apply() 用于从外部以角度执行表达式角度框架。（例如来自浏览器 DOM 事件， setTimeout、XHR 或第三方库）。因为我们正在呼唤我们需要执行适当的范围生命周期的角度框架异常处理，执行手表。

来自官方Angular Documentation

【讨论】：

工作得很棒。非常感谢:)
拯救了我的一天。谢谢

【解决方案2】：

这可能是因为socket.on('message', function (msg) {.. 缺乏角度知识。它发生在角度之外。

然后，如果您在 Angular 之外使用某些东西，那么您必须告诉 Angular 进行更新，因为有一些东西要更新

在$scope.frontEnd = msg;之后使用$scope.$apply()

或者更优选将其包装在$timeout中，

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

这是一个很好的explanation 为什么$timeout 更可取。

【讨论】：