访问angularjs控制器中的局部变量答案

【问题标题】：Accessing local variable in angularjs controller访问angularjs控制器中的局部变量
【发布时间】：2016-01-06 21:28:47
【问题描述】：

在下面的代码中，

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

    $scope.rep = [];

    $scope.tot = {
        name: '',
        marketValue: 0,
        cash: 0,
        legend: 'none'
    };


    (function loadData(){
        $http.get('result.json').
            then(function(data) {
                        angular.forEach(data['data'],function(value, key){
                            $scope.rep[key] = value;
                            $scope.rep[key].marketValue    = parseFloat(value.marketValue);
                            $scope.rep[key].cash           = parseFloat(value.cash);
                        });
                    } ,
                     function(data) {
                        console.log("My error: " + data);
                    }
                );
    })(); // IIFE

    for (var i = 0; i < $scope.rep.length; i++) {
        $scope.tot.marketValue += $scope.rep[i].marketValue;
        $scope.tot.cash += $scope.rep[i].cash;
    }
});

$scope.rep 是在 IIFE 的嵌套函数中访问的局部变量。

IIFE执行后，不再执行，平静终止执行。

控制台没有给出任何错误信息。

为什么for循环不执行？

【问题讨论】：

因为 AJAX 代表 asynchronous... 并且您在 $http 调用返回之前就已经完成了循环。
http.get 调用是异步的，所以当循环执行时，rep.length 还是 0。

标签： javascript angularjs closures

【解决方案1】：

这可能是时间问题。也许 for 循环在 $http.get() 返回结果之前执行。您是否尝试过在 $scope.rep 像这样初始化之后执行 for 循环？

(function loadData(){
    $http.get('result.json').
        then(function(data) {
                    angular.forEach(data['data'],function(value, key){
                        $scope.rep[key] = value;
                        $scope.rep[key].marketValue    = parseFloat(value.marketValue);
                        $scope.rep[key].cash           = parseFloat(value.cash);
                    });
                } ,
                 function(data) {
                    console.log("My error: " + data);
                }
            );
        })
        .then(function() {
          for (var i = 0; i < $scope.rep.length; i++) {
            $scope.totals.marketValue += $scope.rep[i].marketValue;
            $scope.totals.cash += $scope.rep[i].cash;
          }
        })(); // IIFE

【讨论】：

【解决方案2】：

$http.get() 返回一个 Promise，并且只有在该 Promise 得到解决后，它才会运行 .then() 块中的所有代码。（如果 promise 已解决，则为第一个成功回调，如果 promise 被拒绝，则为第二个错误回调。）

当您的代码到达 for 循环时，您已收到来自 $http.get() 的 promise 对象，但您尚未在 .then() 块内运行代码，您在 @ 内设置值987654325@。 for 循环没有执行，因为$scope.rep.length 为 0，所以没有迭代。

要解决此问题，您可以将 for 循环放入 .then() 块中，如下所示：

(function loadData() {
    $http.get('result.json')
        .then(function (data) {
            angular.forEach(data['data'], function (value, key) {
                $scope.rep[key] = value;
                $scope.rep[key].marketValue = parseFloat(value.marketValue);
                $scope.rep[key].cash = parseFloat(value.cash);
            });

            for (var i = 0; i < $scope.rep.length; i++) {
                $scope.tot.marketValue += $scope.rep[i].marketValue;
                $scope.tot.cash += $scope.rep[i].cash;
            }
        }, function (data) {
            console.log("My error: " + data);
        });
})();

我认为应该这样做。

【讨论】：