在循环对象时访问propertyname

时间:2016-04-25 13:24:31

标签: javascript angularjs rest iteration angularjs-ng-resource

正如您在此问题中提供的代码中所看到的,我尝试遍历对象的属性。所有属性都是空对象!我还有另一个对象,我存储了几个休息调用(ngResource Stuff,对于这个问题并不重要)。

在这里你可以看到" Rest-Calls"存储在 $ scope.restCalls

$scope.restCalls = [
   {
     resource1: RestService.call1,
     resource2: RestService.call2,
     resource3: RestService.call3
   },
   {
     resource4: RestService.call4,
     resource5: RestService.call5,
     resource6: RestService.call6
   },
   {
     resource7: RestService.call7,
     resource8: RestService.call8,
     resource9: RestService.call9
   }
];

$ scope.data 表示每个标签的数据。此数组中的每个对象都包含选项卡的数据。所有资源都是空的,如果用户更改为页面,资源将存储在此处。

$scope.data = [
   {
     resource1: {},
     resource2: {},
     resource3: {}
   },
   {
     resource4: {},
     resource5: {},
     resource6: {}
   },
   {
     resource4: {},
     resource5: {},
     resource6: {}
   }
];

到目前为止一切顺利。我保证通话工作正常。在我的应用程序中有多个选项卡,所以我想尝试实现一些延迟加载:D

因此我实现了一个函数:(索引在html中定义,只是0到2之间的数字)

<uib-tab heading="Tab1" select="tabChange(0)">
... HERE I have some tables which access the $scope.data[0] data
</uib-tab>
<uib-tab heading="Tab2" select="tabChange(1)">
... HERE I have some tables which access the $scope.data[1] data
</uib-tab>
<uib-tab heading="Tab3" select="tabChange(2)">
... HERE I have some tables which access the $scope.data[2] data
</uib-tab>

在这里你可以看到功能:

$scope.tabChange = function (index) {
        for (var propertyName in $scope.data[index]) {
            $scope.restCalls[index][propertyName]().$promise.then(function (data) {
                $scope.data[index][propertyName] = data;
            });
        }
    };

现在让我们来看问题描述:

  • 当我更改标签时,功能tabChange 会被触发。
  • 每次Restcall都被正确解雇

结果只会存储在 $ scope.data [index] 的错误属性中。它始终是最后一个属性名称。例如,我改为tab2(索引1)。 $ scope.data 最终会像这样结束:

$scope.data = [
   {
     resource1: {},
     resource2: {},
     resource3: {}
   },
   {
     resource4: {},
     resource5: {},
     resource6: RESULT OBJECT OF THE LAST REST CALL!
   },
   {
     resource7: {},
     resource8: {},
     resource9: {}
   }
]; 

我认为属性然后功能中不可用。但我不知道如何将名称输入此功能。

1 个答案:

答案 0 :(得分:2)

问题出现是因为propertyName位于函数的上部范围内,并且在调用函数之前更改了其值。您可以将变量绑定到函数范围,如下所示。

$scope.tabChange = function (index) {
        for (var propertyName in $scope.data[index]) {
            $scope.restCalls[index][propertyName]().$promise.then(function (propertyName,data) {
                $scope.data[index][propertyName] = data;
            }.bind(null,propertyName));
        }
    };

您可以详细了解javascript闭包here以及其他来自Google的来源。