2016-07-13 7 views
1

각도 응용 프로그램에서 ngRepeat를 사용하고 있는데 연결되어있는 컬렉션에 올바른 데이터가 채워지더라도 ngRepeat가 채워지지 않았습니다.ngRepeat가 채워지지 않은 이유

노드 서버에 HTTP 요청을 보내 데이터를 요청하면 이 서버의 결과를보고 특정 ngRepeat에 연결된 범위에 컬렉션을 채 웁니다.

HTML 파일의 ngRepeat 부분 :

 <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 서버에서 요청을 얻을 호출합니다. 이 양식에서 컨트롤러를 사용할 때 initializeObjects 함수가 호출되고 rowCollection 컬렉션이 채워지지만 ngRepeat가 비어있는 것을 볼 수 있습니다. 내가 다음 코드 RO하려면 Ctrl을 변경 한 후

는 다음 ngRepeat 채울 않았다

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 첫 번째 Ctrl 키 구성으로 채울하지만 두 번째에하지 않았다?

답변

2

첫 번째 방법을 사용하려면 함수를 호출해야하므로 마지막에 ()이 있어야합니다.

.then($scope.initializeObjects) 

에 대한 : 그래서

당신이 을 변경해야 원하는 것을 달성하기 위해

.then($scope.initializeObjects()) 

참고 : 재사용 할 필요가 있기 때문에 두 번째 방법이 더 낫다 이 $scope은 다른 순간에 작동하며 그렇지 않은 경우 정상적인 것으로 유지하십시오 function().

+0

제안 된 방식으로 initializeObjects를 호출하려고하면 다음 오류가 발생합니다. TypeError : $ scope.initializeObjects가 함수가 아닙니다. – user3475306

+0

어떤 오류가 있습니까? 여기에 붙여 넣기 – developer033

+0

'()'없이 함수를 호출 할 때 언급했듯이 함수는 ngRepeat가 채워지지 않는다는 문제가 있습니다. – user3475306

0

첫 번째 구현에서는 약속에서 사용하기 전에 $scope.initializeObjects =...을 넣을 때 작동해야합니다. u는 두 번째 시도로 함수를 선언하면이 폐쇄의 코드가 실행하기 전에

$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을 확인하여 차이점을 이해할 수 있습니다.

관련 문제