使用 angularJs 显示来自套接字 io 的数据
Displaying data from socket io using angularJs
我正在尝试从套接字io获取数据并使用angularJs在图形上显示数据。我从服务器获取了正确的数据,但是当我尝试显示它时,我得到:"没有要显示的数据"。我尝试调试我的控制器,我看到我正在获取数据,但我的 HTML 上的一些角度没有显示它。我也尝试使用异步.js但它仍然不起作用。
我的控制器代码:
$scope.graph2,data2 = [];
socketFactory.emit('getTemplateStatistics', null);
socketFactory.on('sendTemplateStatistics', function(result) {
for (var i=0; i < result.length; i++) {
var temp = {label: result[i]._id, value: ""+result[i].total};
data2.push(temp);
}
$scope.graph2 = {
chart: {
caption: "Age profile of website visitors",
subcaption: "Last Year",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data2
};
});
我的 HTML 代码:
<div class="statistics view indent">
<div class="container" style="margin-top:10px">
<header>
<h3>Statistics Preview Displayer</h3>
</header>
<div>
<fusioncharts
width="600"
height="400"
type="pie3d"
datasource="{{ graph2 }}"
></fusioncharts>
</div>
<a href="#/preferences" class="btn btn-primary" style="float: right;">Go back</a>
</div>
</div>
我不认为这是一个套接字问题。可能在 for 循环完成执行之前分配了 '$scope.graph2',因此 'data2' 没有值。尝试像这样更改代码
$scope.graph2,data2 = [];
socketFactory.emit('getTemplateStatistics', null);
socketFactory.on('sendTemplateStatistics', function(result) {
for (var i=0; i < result.length; i++) {
var temp = {label: result[i]._id, value: ""+result[i].total};
data2.push(temp);
if(i == result.length - 1) { // To ensure $scope.graph2 is assigned only after for loop completes and data has all values
$scope.graph2 = {
chart: {
caption: "Age profile of website visitors",
subcaption: "Last Year",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data2
};
}
}
});
这样$scope.graph2 只有在 for 循环完成后才会被分配,因此 data2 不会为空
相关文章:
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 通过node.js和socket.io向特定用户发送数据
- Socket.io socket.emit 不将数据传递到服务器
- 使用其他javascript文件nodejs和express发送和获取数据 socket.io
- 如何使用socket.io获取cookie数据
- 是否自动更新套接字连接数据?socket.io
- 每个客户端保存socket.io数据
- 如何在express中使用socket.io发布多个对象数据
- Socket.IO:如何在同一服务器中的Socket.on()事件之间通信/交换数据
- 使用socket.io发送数据
- Socket.io-向发送方和客户端发送不同的数据
- 如何从我的 import.io API 获取数据
- 将数据追加到所有 Socket.io 客户端发射器
- 如何使用 import.io 中的数据创建 Web 应用
- 如果在节点 JS 中落后于 Socket.IO,则丢弃数据包
- Socket.io - 每 34 毫秒接收一次数据
- Socket.io 清理传入数据 (XSS)
- Socket.IO 将数据发送到房间给自己
- Node.js + Socket.io 如何从 PHP 接收数据
- Socket.io 数据包在断开连接和重新连接之间丢失