我的角度工厂承诺有什么问题？

Question

我正在加载谷歌地图，当我导航到 /map 时，它会加载标记以填充地图。问题是其余的 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() 返回一个承诺，但您将其视为在控制器中返回一个数组

此外，您还不断在for 循环中覆盖同一对象的属性，并将同一对象引用推送到数组中。这意味着数组中的所有元素都将以循环中设置的最后一个值结束...因为它们都是对一个对象的引用

替换

$scope.mapLocations = 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);
    }    
});