从 websocket 服务器推送消息后更新 $scope 变量

Question

我连接到一个将消息推送到我的 angularJS 应用程序的 websocket 服务器。我在服务中收到这些消息，现在我想 public 在 gui 上显示这些数据。

angular.module("test", [])
   .value("DATA", [])
   .service("WSS", ["$rootScope", "DATA", function ($rootScope, DATA) {

       //initialise websocket here

       m_WebSocket.onmessage = function (msg) {
           $rootScope.$apply(function () {
               DATA = angular.fromJson(msg.data).slice();
           });

           console.debug(DATA); //gives me the expected result
       };
   }])
   .controller("CTRL", ["$scope", "DATA", function ($scope, DATA) {
       $scope.data = DATA;//wont update
   }]);

因此，据我了解 angular 我认为它必须以这种方式工作，但我的数据数组仍然是空的。我在这里错过了什么？

Answer 1

问题是，当你分配DATA = angular.fromJson(msg.data).slice();时，它根本不会影响$scope.data = DATA;，因为$scope.data和服务中的新DATA数组没有连接，他们指向不同的对象。我们说它们之间没有引用。所以它也不会在视图中更新。

如果您只是更改对象的属性而不是完全覆盖对象引用，则修复起来非常容易：

angular.module("test", [])
    .value("DATA", {values: []})
    .service("WSS", ["$rootScope", "DATA", function ($rootScope, DATA) {

    //initialise websocket here

    m_WebSocket.onmessage = function (msg) {
        $rootScope.$apply(function () {
            DATA.values = angular.fromJson(msg.data).slice();
        });
    };
}])

.controller("CTRL", ["$scope", "DATA", function ($scope, DATA) {
    $scope.data = DATA;
}]);

然后在模板中，您将使用 data.values 而不是像以前那样只使用 data。

在这种情况下，$scope.data 是一个具有属性 values 的对象。当新消息来自服务器时，唯一改变的是 DATA 对象的属性 values。但是在控制器中 $scope.data 指向 相同的 对象，因此 Angular 将能够获取选定的新数据。

从 websocket 服务器推送消息后更新 $scope 变量

Updating $scope variable after push message from websocket server

javascript

angularjs

angularjs-scope