2014-12-26 8 views
1

angular-google-maps을 사용하여 각도 앱을 만듭니다. 내가하려는 것은 각 위치의 위도와 경도에 마커를 배치하기 위해 일련의 위치를 ​​반복하는 것입니다. 그러나 for 루프 내에서 몇 가지 클로저를 사용하기 때문에 마커는 배열의 마지막 항목에만 표시됩니다. 이 코드와 함께 즉시 호출 함수 표현식 (인생)을 사용하는 방법에 대한

$scope.petMarkers = []; 
$http.get('/api/pets').success(function(foundPets){ 
    $scope.foundPets = foundPets; 
    var listOfPets = $scope.foundPets; 
    var markerCreator = function(arrayOfPets){ 
    for (var i = 0; i < arrayOfPets.length; i++){ 
     var singlePet = arrayOfPets[i]; 
     var petName = arrayOfPets[i].name; 
     var identity = singlePet._id; 
     var location = singlePet.addressFound; 
     var split = location.split(' '); 
     var joined = split.join('+'); 
     var httpAddress = 'http://maps.google.com/maps/api/geocode/json?address=' + joined + '&sensor=false'; 

     // anonymous function keeps reference to i, and when console.log is called, for loop has already finished and value of i is set to 4 
     $http.get(httpAddress).success(function(mapDataAgain){ 
     var ladder = mapDataAgain.results[0].geometry.location.lat; 
     var longer = mapDataAgain.results[0].geometry.location.lng; 
     var obj = { 
      latitude: ladder, 
      longitude: longer, 
      title: petName, 
      id: i 
     }; 
     $scope.$watch(function(){ 
      console.log('we are in scope.watch'); 
      return $scope.map.bounds; 
     }, function(){ 
      var markers = []; 
      //markers.push(obj); 
      $scope.petMarkers.push(obj); 
      //$scope.petMarkers = markers; 
      console.log('markers = ', $scope.petMarkers); 
     }, true); 
     }); 
    }; 
    }; 
    markerCreator(listOfPets); 
}); 

모든 아이디어 : 여기 코드는? 두 개의 IIFE ($ http 호출의 성공시 호출되는 익명 함수와 $ scope에 대한 인수로 호출되는 익명 함수에 대한 함수 중 하나)가 필요한지 여부를 파악하는 데 문제가 있습니다. 나는 여기서 잃어 버렸기 때문에 설명/도움/제안이 도움이 될 것입니다.

답변

3

for 루프가 필요하지 않으며 IIFE가 필요하지 않습니다. 배열 결과가 있으므로 기본 .forEach 함수를 호출하십시오. 배열의 모든 요소에서 실행할 수있는 콜백을 사용합니다. 이 접근법의 이점 :

  • 기본적으로 닫힘을 제공합니다. 콜백은 자체 범위를 가지며, 자체적으로 포함되어 다른 코드와 구분됩니다. 각 요소마다 자체 마커가 표시됩니다.
  • 코드를 훨씬 쉽게 읽을 수 있습니다. 이것은 코딩에서 지나치게 간과되는 세부 사항입니다. 어떤 종류의 기술적 부채를 피하려고 노력하고 싶습니다. 가장 쉬운 방법 중 하나는 기본 배열 방법을 사용하는 것입니다. 그들은 명확하게 당신의 코드의 의도를 알려준다. & 디버깅이 훨씬 쉬워진다. (특히 많은 도움을 요청할 때 스택 오버플로가 필요하다. 코드)