使用angularJs显示来自socket io的数据

Posted 2023-02-19

【中文标题】使用angularJs显示来自socket io的数据

【英文标题】：Displaying data from socket io using angularJs

【发布时间】：2016-05-27 12:36:03

【问题描述】：

我正在尝试从套接字 io 获取数据并使用 angularJs 在图表上显示数据。我从服务器获取正确的数据，但是当我尝试显示它时，我得到：“没有要显示的数据”。我试图调试我的控制器，我看到我正在获取数据，但是我的 html 上的一些角度没有显示它。 我也尝试过使用 Async.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 
                 
                
                type="pie3d"
                datasource=" graph2 "
            ></fusioncharts>
        </div>
        <a href="#/preferences" class="btn btn-primary" style="float: right;">Go back</a>
    </div>
</div>

【参考方案1】：

我不认为这是一个套接字问题。可能在 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 不会为空