WebSocket的服务范围更新在角（使用ngWebSocket）？ [英] WebSocket Service update Scope in Angular (Using ngWebSocket)?
问题描述
我试图让数据从WebSocket的来自动更新一个控制器的范围内的值。
我的服务：
mimosaApp.service（设备功能（$的WebSocket）{
VAR自我=这一点;
变种WS = $的WebSocket。美元的新（{
网址：WS：//+ window.location.host +：81，
//模拟：真实，
重新连接：真
}）;
this.data = {}; WS，在$（$开放功能（）{
。WS $放出（获取，设备）;
}）;
WS，在$（$消息，功能（消息）{
的console.log（WS收到，邮件）;
对（在消息VAR键）{
self.data这样[关键] =信息[关键]
}
的console.log（self.data这样）; //此时，self.data这样包含正确的数据。
}）;
this.send =功能（OBJ）{
。WS $放出（设置，OBJ）;
};
}）;
和我简单的控制器：
angular.module（MimosaApp）。控制器（的PageController，[设备，$范围，$ HTTP功能（设备，$范围，$ HTTP）{
$ scope.device =设备;
}]）;
在一个插座连接时，浏览器发送一个信息，要求数据（$ open事件）。当它得到响应，它更新与JSON对象Device.data对象。
但我没有看到这反映了我控制范围/视图中。如果控制器里面，我设置类似 Device.data.name ='嗒嗒'; 我可以看到在控制范围/视图中的name属性。
我有点新角很抱歉，如果我的问题没有引起太大的感觉。 ：）
我的观点是试图使用它像：
＆LT; DIV CLASS =集装箱液＆GT;
位置
＆LT; UL＆GT;
＆LT;李NG重复=（键，值）device.data＆GT;
{{键}} {{值}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆所述p为H.; {{device.data.face}}＆下; / P＆GT;
＆LT; / DIV＆GT;
综观的来源它似乎并没有调用使用范围消化周期。$适用在 $关于处理程序。这意味着角不知道任何更新其观点绑定，所以没有改变被反映在视图中。所以你需要做手工在你的服务，你既可以注入 $ rootScope 或只是 $超时触发消化周期。
例如： -
注 $超时
WS。在$（$消息，功能（消息）{
的console.log（WS收到，邮件）;
对（在消息VAR键）{
self.data这样[关键] =信息[关键]
}
的console.log（self.data这样）; //此时，self.data这样包含正确的数据。
$超时（angular.noop）; //＆LT; - 只是调用一个虚拟摘要
}）;
注 $ rootScope
WS。在$（$消息，功能（消息）{
的console.log（WS收到，邮件）;
对（在消息VAR键）{
self.data这样[关键] =信息[关键]
}
的console.log（self.data这样）; //此时，self.data这样包含正确的数据。
$ rootScope $适用（）。 //调用消化
}）;
甚至使用创建服务虚设承诺 $ Q 。
mimosaApp.service（设备功能（$的WebSocket，$ Q）{
VAR自我=这一点;
变种_dummyPromise = $ q.when（）; //＆LT; - 在这里
变种WS = $的WebSocket。美元的新（{
网址：WS：//+ window.location.host +：81，
//模拟：真实，
重新连接：真
}）;
// ...
WS，在$（$消息，功能（消息）{
的console.log（WS收到，邮件）;
对（在消息VAR键）{
self.data这样[关键] =信息[关键]
}
_dummyPromise.then（angular.noop）; //＆LT; - 在这里
}）;
this.send =功能（OBJ）{
。WS $放出（设置，OBJ）;
};
}）;
I'm trying to get data coming from a websocket to automatically update value inside a controller's scope.
My Service:
mimosaApp.service("Device", function ($websocket) {
var self = this;
var ws = $websocket.$new({
url: "ws://" + window.location.host + ":81",
//mock: true,
reconnect: true
});
this.data = {};
ws.$on("$open", function() {
ws.$emit("get", "device");
});
ws.$on("$message", function (message) {
console.log("WS Received", message);
for(var key in message) {
self.data[key] = message[key];
}
console.log(self.data); // At this point, self.data contains the proper data.
});
this.send = function (obj) {
ws.$emit("set", obj);
};
});
And my simple controller:
angular.module("MimosaApp").controller("PageController", ["Device", "$scope", "$http", function(Device, $scope, $http) {
$scope.device = Device;
}]);
When a socket connection is made, the browser sends a message asking for data (the $open event). When it gets a response, it updates the Device.data object with the JSON object.
But I'm not seeing this reflect inside my controller scope/view. If inside the Controller, I set something like Device.data.name ='blah'; I can see the name property in the controller scope/view.
I'm a little new to Angular so sorry if my question doesn't quite make sense. :)
My view is trying to use it like:
<div class="container-fluid">
location
<ul>
<li ng-repeat="(key, value) in device.data">
{{key}}: {{ value }}
</li>
</ul>
<p>{{device.data.face}}</p>
</div>
Looking at the source it does not seem to invoke digest cycle using scope.$apply within the $on handler. Which means that angular does not know about any update to its view bindings, so no change gets reflected in the view. So you would need to do it manually in your service, you could either inject a $rootScope or just a $timeout to trigger a digest cycle.
Example:-
inject $timeout
ws.$on("$message", function (message) {
console.log("WS Received", message);
for(var key in message) {
self.data[key] = message[key];
}
console.log(self.data); // At this point, self.data contains the proper data.
$timeout(angular.noop); //<-- just invoke a dummy digest
});
inject $rootScope
ws.$on("$message", function (message) {
console.log("WS Received", message);
for(var key in message) {
self.data[key] = message[key];
}
console.log(self.data); // At this point, self.data contains the proper data.
$rootScope.$apply(); //invoke digest
});
Or even create a dummy promise in your service using $q.
mimosaApp.service("Device", function ($websocket, $q) {
var self = this;
var _dummyPromise = $q.when(); //<-- here
var ws = $websocket.$new({
url: "ws://" + window.location.host + ":81",
//mock: true,
reconnect: true
});
//...
ws.$on("$message", function (message) {
console.log("WS Received", message);
for(var key in message) {
self.data[key] = message[key];
}
_dummyPromise.then(angular.noop); //<-- here
});
this.send = function (obj) {
ws.$emit("set", obj);
};
});
这篇关于WebSocket的服务范围更新在角（使用ngWebSocket）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
