Question

我连接到websocket服务器，将消息推送到我的angularJS App。我在服务中收到这些消息，现在我想在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
   }]);

所以，据我所知，我认为它必须以这种方式工作，但我的数据阵列保持空白。我在这里缺少什么？

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的对象。当新消息来自服务器时，唯一改变的是values对象的属性DATA。但是在控制器$scope.data中指向相同的对象，因此Angular将能够选择新数据。

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

1 个答案: