Warum ngRepeat nicht bestückt ist

Question

Ich verwende ngRepeat in meiner eckigen Anwendung und aus irgendeinem Grund wurde ngRepeat nicht aufgefüllt, obwohl die Sammlung, mit der es verbunden ist, mit den richtigen Daten gefüllt ist.

Was ich tue ist das Senden von http Get Request an einen Knoten-Server, um die Daten anzufordern, gehen Sie über das Ergebnis vom Server und füllen Sie eine Sammlung auf dem Bereich, der mit diesem bestimmten ngRepeat verbunden ist.

Der ngRepeat Teil der HTML-Datei:

 <div id="cellRow" ng-repeat="obj in rowsCollection track by obj.index"> 
      <div class="inputsContainer"> 
       <input ng-model="obj.col1"></input> 
       <input ng-model="obj.col2"></input> 
       <input ng-model="obj.col3"></input> 
      </div> 
     </div> 

Der Ctrl-Code:

angular.module('App').controller('Ctrl', ['$scope','dataUtils', function($scope,dataUtils) { 
    $scope.dataObj = null; 
    $scope.rowsCollection = []; 
    dataUtils.getDataObj() 
    .then($scope.initializeObjects) 
    .catch($scope.showError); 


    $scope.initializeObjects = function(data) { 
     if(data && data.length > 0) { 
      for(var index = 0; index < 21; index++) { 
       $scope.dataObj = {}; 
       $scope.dataObj.index = index + 1; 
       $scope.dataObj.col1 = data[0][index]; 
       $scope.dataObj.col2 = data[1][index]; 
       $scope.dataObj.col3 = data[2][index]; 
       $scope.rowsCollection.push($scope.dataObj); 
      } 
     } 
    }; 

    $scope.showError = function(errorMsg) { 
     console.log(errorMsg); 
    }; 

}]); 

Die dataUtils.getDataObj ruft eine HTTP-Anforderung vom Server erhalten. Bei Verwendung des Controllers in dieser Form sehe ich, dass die Funktion initializeObjects aufgerufen wird und die rowCollection-Auflistung gefüllt ist, aber das ngRepeat bleibt leer.

Nachdem ich die Strg-ro folgenden Code geändert:

angular.module('App').controller('Ctrl', ['$scope','dataUtils', function($scope,dataUtils) { 
    $scope.dataObj = null; 
    $scope.rowsCollection = []; 
    dataUtils.getDataObj() 
    .then(initializeObjects) 
    .catch(showError); 

    function initializeObjects(data) { 
     if(data && data.length > 0) { 
      for(var index = 0; index < 21; index++) { 
       $scope.dataObj = {}; 
       $scope.dataObj.index = index + 1; 
       $scope.dataObj.col1 = data[0][index]; 
       $scope.dataObj.col2 = data[1][index]; 
       $scope.dataObj.col3 = data[2][index]; 
       $scope.rowsCollection.push($scope.dataObj); 
      } 
     } 
    } 

    function showError(errorMsg) { 
     console.log(errorMsg); 
    } 
}]); 

Die ngRepeat hat bevölkern, warum nicht bevölkern die ngRepeat in der ersten Ctrl-Konfiguration, aber in der zweiten tat?

Answer 1

Wenn Sie den ersten Weg verwenden möchten, da Sie eine Funktion aufrufen, muss es () am Ende haben.

So zu erreichen, was Sie wollen, sollten Sie diese ändern:

.then($scope.initializeObjects) 

für:

.then($scope.initializeObjects()) 

Hinweis: Der zweite Weg ist besser, da Sie wieder verwenden müssen Diese $scope Funktion in einem anderen Moment, ansonsten, halten Sie es als eine normale function().

Answer 2

In Ihrer ersten Implementierung sollte es funktionieren, wenn Sie die $scope.initializeObjects =... vor der Verwendung in das Versprechen setzen.

$scope.initializeObjects = function(data) { 
    if(data && data.length > 0) { 
     for(var index = 0; index < 21; index++) { 
      $scope.dataObj = {}; 
      $scope.dataObj.index = index + 1; 
      $scope.dataObj.col1 = data[0][index]; 
      $scope.dataObj.col2 = data[1][index]; 
      $scope.dataObj.col3 = data[2][index]; 
      $scope.rowsCollection.push($scope.dataObj); 
     } 
    } 
}; 

$scope.showError = function(errorMsg) { 
    console.log(errorMsg); 
}; 

dataUtils.getDataObj() 
    .then($scope.initializeObjects) 
    .catch($scope.showError); 

Wenn jedoch u Ihre Funktion als zweiten Versuch erklären, wird es definiert werden, bevor der Code in dieser Schließung ausgeführt werden soll.

Sie können überprüfen this question, um den Unterschied zu verstehen.