AngularJS 控制器只更新部分数据

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;
            });
    };
};

当我运行这个脚本时，我只看到 last 机器 ID 发生了变化。脚本运行时浏览器上的示例输出如下：

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

"machineID_3" 的值每隔 2 秒就会改变一次，而 "machineID_1" 和 "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 调用是异步的。所以如果你像上面那样做，你的代码可能会发送 3 个 http 请求到 machineId=3 的服务器。因为，异步方式，您的循环将在所有 http 调用发送之前完成执行。应作如下修正。此外，您分配的服务器调用响应如下。

$scope.data[$scope.machineID] = 数据；

由于 http 调用的异步行为，现在 $scope.machineID 可能等于 3。因此，即使您从所有 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 调用是异步的，只有在收到来自服务器的响应时才调用成功函数。 HTTP 请求也比简单的 for 循环执行慢得多。因此，当收到第一个响应并且调用循环的成功函数已经终止并且循环变量i == undefined 和$scope.machineID == 'machineID_3' 时。结果，所有三个返回值都被分配给$scope.data[ 'machineID_3' ]