工場の約束は間違っていますか？

Question

私はGoogleマップをロードしています。私は/ mapsに移動すると、マップを読み込んでマップを作成します。問題は、マーカがロードされる前に、残りのJavaScriptが実行されて実行されることです。私が考えていたのは、地図データを取得する約束を工場に返すことでした。これはうまくいかなかった。

誰でも私が間違っていることについてアドバイスできますか？私はこれを見コンソールで

：

angular.js:13920 TypeError: Cannot read property 'lat' of undefined 
at Object.link (http://localhost/logintest/js/app.js:586:55) 

ライン586は、（ディレクティブで）この行を参照：

  center: new google.maps.LatLng(lastElement.lat, lastElement.lon), 

私はそうのようなlastElementを得る：

var lastElement = scope.arrLocations[scope.arrLocations.length - 1]; 

工場：

app.factory('map', ['$q', function($q){ 

var map={}; 
var mapInfoItems=[]; 

map.getMapInfo = function() { 
    var deferred = $q.defer(); 
    var mapitems = firebase.database().ref('mapinfo/'+firebase.auth().currentUser.uid); 
    mapitems.on('child_added', function(snapshot){ 
     mapInfoItems.push(snapshot.val()); 
     deferred.resolve(mapInfoItems); 
    }); 

    return deferred.promise; 
}; 

    return map; 
}]); 

コントローラー：

app.controller('mapController', ['$scope', 'map', function($scope, map){ 
    $scope.myLocations = {}; 
    $scope.arrLocations = []; 
    $scope.mapLocations = map.getMapInfo(); 

    for(var i=0; i<$scope.mapLocations.length; i++){ 
     $scope.myLocations.title = $scope.mapLocations[i].name; 
     $scope.myLocations.content = $scope.mapLocations[i].message; 
     $scope.myLocations.lat  = $scope.mapLocations[i].lat; 
     $scope.myLocations.lon  = $scope.mapLocations[i].lon; 
     $scope.arrLocations.push($scope.myLocations); 
    } 

}]); 

HTML：

<div ng-controller="mapController"> 
    <my-map get-map-fn="getMap()"></my-map> 
</div> 

Answer 1

map.getMapInfo()は約束を返しますが、それはコントローラ

の配列を返す場合も、プロパティを上書きしておくと、あなたがそれを処理していますループ内で同じオブジェクトのループを作成し、同じオブジェクト参照を配列にプッシュします。これは、彼らが一つのオブジェクトへのすべての参照があるので

は何

map.getMapInfo().then(function(locations){ 
    for(var i=0; i<locations.length; i++){ 
     // create new object each iteration 
     var obj ={ 
      title : locations[i].name, 
      content: locations[i].message, 
      // ... etc  
     }  

     $scope.arrLocations.push(obj); 
    }  
});