Question

我在客户端上运行了AngularJS的socket.io客户端 - 服务器设置。

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

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

frontEnd

我现在面临一个奇怪的问题。当我编写以下代码段来打印console.log(msg);时，它不会显示。但msg有效，它会向我显示变量<body ng-app="AdminApp"> <div ng-controller="StatsController"> <p>{{frontEnd}}</p> //Doesn't show anything </div> </body>发出的数据。

{{1}}

任何人都可以帮助我吗？

Answer 1

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

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

Answer 2

这可能是因为socket.on('message', function (msg) {..不具备角度知识。它在角度之外发生的事情。

然后，如果你在角度以外的东西，那么你必须告诉角度更新，因为有更新的东西

在$scope.$apply()

之后使用$scope.frontEnd = msg;

或更优选将其打包在$timeout as，

中

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

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

Socket.IO消息不更新Angular变量

2 个答案: