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

时间:2016-10-08 00:09:42

标签: angularjs angular-promise

我正在加载Google地图,当我导航到/ 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>

1 个答案:

答案 0 :(得分:1)

map.getMapInfo()会返回一个promise,但您将其视为在控制器中返回一个数组

此外,您将继续覆盖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);
    }    
});
相关问题