Zugriff auf Eigenschaftenname beim Durchlaufen eines Objekts

Question

Wie Sie in dem Code, den ich in dieser Frage angegeben habe, sehen können, versuche ich, die Eigenschaften eines Objekts zu durchlaufen. Alle Eigenschaften sind leere Objekte! Ich habe auch ein anderes Objekt, wo ich ein paar Rest-Aufrufe gespeichert habe (ngResource Stuff, die für diese Frage nicht wichtig ist).

Hier können Sie die in $ Scope.restCalls gespeicherten "Rest-Calls" sehen.

$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 symbolisiert die Daten für jeden Registerkarte. Jedes Objekt in diesem Array enthält die Daten für die Registerkarte. Alle Ressourcen werden leer initialisiert und wenn der Benutzer auf eine Seite wechselt, werden die Ressourcen hier gespeichert.

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

So weit so gut. Ich garantiere, dass die Anrufe gut funktionieren. In meiner Anwendung gibt es mehrere Registerkarten und ich möchte versuchen, einige lazy laden zu implementieren: D

Daher habe ich eine Funktion implementiert: (Der Index ist in der HTML definiert und ist nur die Zahl zwischen 0 und 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> 

Hier können Sie die Funktion sehen:

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

Nun zum Problem Beschreibung kommen lässt:

• Wenn ich die Registerkarte ändere, wird die Funktion tabChange gefeuert.
• Jeder Restcall wird richtig die Ergebnisse nur erhalten in die falsche Eigenschaft $ scope.data [index]

gefeuert gespeichert. Es ist immer der letzte Eigenschaftsname. Zum Beispiel wechsle ich zu tab2 (Index 1). $ scope.data wird bis am Ende wie folgt:

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

Ich denke, dass Property nicht verfügbar ist in der dann funktionieren. Aber ich habe keine Ahnung, wie man den Namen in diese Funktion bekommt.

Answer 1

Das Problem tritt auf, weil der propertyName im oberen Bereich der Funktion ist und sein Wert geändert wird, bevor die Funktion aufgerufen wird. Sie können Ihre Variable wie unten beschrieben an den Funktionsumfang binden.

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

Sie können mehr über Javascript Schließungen erfahren here und in anderen Quellen, die Sie von Google finden.