我已连接到Websocket服务器,该服务器将消息推送到我的angularJS应用。我在服务中收到这些消息,现在想在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
   }]);

因此,据我所知,我以为它必须以这种方式工作,但是我的数据数组仍然为空。我在这里想念什么?

最佳答案

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

如果仅更改对象的属性而不是完全覆盖对象引用,则很容易修复:

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。但是在 Controller 中$scope.data指向相同的对象,因此Angular将能够拾取选择的新数据。

09-30 13:02
查看更多