我已连接到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将能够拾取选择的新数据。