Почему ngRepeat не заселен

Question

Я использую ngRepeat в своем угловом приложении, и по какой-то причине ngRepeat не заполнялся, хотя коллекция, к которой она подключена, заполнена правильными данными.

Что я делаю, это отправить HTTP-запрос на сервер узла, чтобы запросить данные, перейдите результат с сервера и заполните коллекцию в области, связанной с этим конкретным ngRepeat.

ngRepeat часть файла HTML:

 <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> 

Ctrl код:

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

}]); 

dataUtils.getDataObj называет HTTP GET запрос от сервера. При использовании контроллера в этой форме я вижу, что вызывается функция initializeObjects, и коллекция rowCollection заполняется, но ngRepeat остается пустым.

После того как я изменил Ctrl ро следующий код:

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

ngRepeat было заселить, почему не ngRepeat заселить в первой конфигурации Ctrl но сделал во второй?

Answer 1

Если вы хотите использовать первый способ, так как вы вызываете функцию, она должна иметь () в конце.

Так добиться того, что вы хотите, вы должны изменить это:

.then($scope.initializeObjects) 

для:

.then($scope.initializeObjects()) 

Примечание: Второй способ лучше, так как вам необходимо повторно использовать этот $scope функционирует в другой момент, в противном случае сохраните его как обычный function().

Answer 2

В первой реализации, он должен работать, когда u положил $scope.initializeObjects =..., прежде чем использовать его в обещании.

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

Однако, если и объявить функцию в качестве второй попытки, она будет определена до того, как код в этом закрытии получает казнен.

Вы можете проверить this question, чтобы понять разницу.