Question

我有一个小瓶子服务器，它返回给定machineID的随机值，如下所示：

@app.route('/dataMachine')
@enable_cors
def simulatedMachineData():

    prevVals = {'machineID_1': 0,'machineID_2': 0, 'machineID_3': 0,}
    devVals = {'machineID_1': 5.3,'machineID_2': 2.1,'machineID_3': 7.1,}    

    dictVals  = bottle.request.query.decode()
    machineID = dictVals.get('machine', '')
    if machineID not in devVals.keys(): return '-1'
    prevVals[machineID] += normal(scale=devVals[machineID])
    return str(prevVals[machineID])

这没有问题。

现在我有一个与此数据交互的AngularJS应用程序，如下所示：

var app = angular.module('testBidirection', []);

app.controller('tempCntrl', function ($scope, $http, $interval){

    /////////////////////////////////////////////////
    // Data to display and its update function
    $scope.data = {
        'machineID_1':'0',
        'machineID_2':'0',
        'machineID_3':'0',
    };

    var machineIDs = ['machineID_1', 'machineID_2', 'machineID_3'];
    $scope.machineID = 'machineID_1';

    $scope.getData = function(){
        for (var i = 0; i < 3; i++) {
                $scope.machineID = machineIDs[i];
                $http.get('http://localhost:8080/dataMachine?machine=' + $scope.machineID).success(function(data) {
                    $scope.data[ $scope.machineID ] = data;
                });
        };
    };


    //////////////////////////////////////////////////
    // Button controller. Use this controller to 
    //      toggle the initiation of getting and 
    //      stopping data retrieval ...
    $scope.buttonText = 'start Comm';
    $scope.toggleComm = function(){
        if ($scope.buttonText == 'start Comm') {
            $scope.buttonText = 'stop Comm';
            stop = $interval($scope.getData, 2*1000);
        } else {
            $scope.buttonText = 'start Comm';
            $interval.cancel(stop);
            stop=undefined;
        }
    };

});

我认为问题出在这个功能范围内：

$scope.getData = function(){
    for (var i = 0; i < 3; i++) {
            $scope.machineID = machineIDs[i];
            $http.get('http://localhost:8080/dataMachine?machine=' + $scope.machineID).success(function(data) {
                $scope.data[ $scope.machineID ] = data;
            });
    };
};

当我运行此脚本时，我只看到最后计算机ID更改。脚本运行时浏览器上的示例输出如下：

{"machineID_1":"0","machineID_2":"0","machineID_3":"2.37252542925"}

"machineID_3"的值每2秒都会保持不变，而"machineID_1" amd "machineID_2"的值仍为0.

我可以从我的Python输出中看到服务器每2秒获取正确的get请求，如下例所示。

127.0.0.1 - - [22/Apr/2016 16:33:32] "GET /dataMachine?machine=machineID_3 HTTP/1.1" 200 14
127.0.0.1 - - [22/Apr/2016 16:33:34] "GET /dataMachine?machine=machineID_1 HTTP/1.1" 200 14
127.0.0.1 - - [22/Apr/2016 16:33:34] "GET /dataMachine?machine=machineID_2 HTTP/1.1" 200 14
127.0.0.1 - - [22/Apr/2016 16:33:34] "GET /dataMachine?machine=machineID_3 HTTP/1.1" 200 14
127.0.0.1 - - [22/Apr/2016 16:33:36] "GET /dataMachine?machine=machineID_1 HTTP/1.1" 200 13
127.0.0.1 - - [22/Apr/2016 16:33:36] "GET /dataMachine?machine=machineID_2 HTTP/1.1" 200 14
127.0.0.1 - - [22/Apr/2016 16:33:36] "GET /dataMachine?machine=machineID_3 HTTP/1.1" 200 13

我在范围规则中遗漏了什么？

资源：

Bottle Server的全部内容：

import bottle
from bottle import response
from numpy.random import normal

import json
import pandas as pd 

app = bottle.Bottle()

# the decorator
def enable_cors(fn):
    def _enable_cors(*args, **kwargs):
        # set CORS headers
        response.headers['Access-Control-Allow-Origin'] = '*'
        response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, OPTIONS'
        response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token'

        if bottle.request.method != 'OPTIONS':
            # actual request; reply with the actual response
            return fn(*args, **kwargs)

    return _enable_cors

@app.route('/dataMachine')
@enable_cors
def simulatedMachineData():

    prevVals = {'machineID_1': 0,'machineID_2': 0,'machineID_3': 0,}
    devVals = {'machineID_1': 5.3,'machineID_2': 2.1,'machineID_3': 7.1,}    

    dictVals  = bottle.request.query.decode()
    machineID = dictVals.get('machine', '')
    if machineID not in devVals.keys(): return '-1'
    prevVals[machineID] += normal(scale=devVals[machineID])
    return str(prevVals[machineID])

HTML文件的全部内容：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Plotly Graph Plotter Directive for AngularJS - Demo</title>
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="app3.js"></script>
</head>
<body ng-app="testBidirection">

Testing the return Values ...
<div  ng-controller="tempCntrl">

    <button ng-click='toggleComm()'>{{buttonText}}</button>
    <hr>
    {{data}}
    <hr>
</div>

</body>
</html>

Answer 1

我可以在以下几行中看到代码中的几个问题。

$ scope.machineID ='machineID_1';

为什么要将此分配给$ scope变量？我可以看到你只使用它将机器ID发送到你的循环内的服务器。如果您未在视图中使用此变量，则应按如下方式进行更正。

var machineID = 'machineID_1';

$scope.getData = function(){ for (var i = 0; i < 3; i++) { $scope.machineID = machineIDs[i]; $http.get('http://localhost:8080/dataMachine?machine=' + $scope.machineID).success(function(data) { $scope.data[ $scope.machineID ] = data; }); }; };

向服务器发送Http调用是异步的。因此，如果您像上面那样执行此操作，您的代码可能会向machineId = 3的服务器发送3个http请求。因为，异步方式，您的循环将在所有http调用发送之前完成执行。它应该纠正如下。此外，您还分配了服务器调用的响应，如下所示。

$ scope.data [$ scope.machineID] = data;

现在$ scope.machineID可能等于3，因为http调用的异步行为。因此，即使您从所有3台机器IDS获取数据，实际上您也为machineId 3分配了值。

$scope.getData = function(){
    for (var i = 0; i < 3; i++) {

            $http.get('http://localhost:8080/dataMachine?machine=' + machineIDs[i]).success(function(data) {
                $scope.data[machineIDs[i]] = data;
            });
    };
};

<强>更新

    $scope.getData = function(){
       for (var i = 0; i < 3; i++) {
        var machineId=machineIDs[i];
        $http.get('http://localhost:8080/dataMachine?machine=' + machineId).success((function(machineId) {
                 return function(data) {
                 $scope.data[machineId] = data;
               }
        })(machineId));
      }
    }

Answer 2

根据Madura Pradeep发布的答案，看看问题的根源，请考虑以下事项：

$ http调用是异步的，只有在从服务器收到响应时才会调用success函数。 HTTP请求也比简单的for循环执行要慢得多。因此，当收到第一个响应并且称为循环的成功函数终止并且循环变量i == undefined和$scope.machineID == 'machineID_3'时。因此，所有三个返回值都会分配给$scope.data[ 'machineID_3' ]

AngularJS控制器仅更新部分数据

2 个答案: