我的角度工厂承诺有什么问题？(What is wrong with my angular factory promise?)

我的角度工厂承诺有什么问题？(What is wrong with my angular factory 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>

I am loading a Google map and when I navigate to /map it loads the the markers to populate the map. The problem is that the rest of the javascript runs and executes before the markers have loaded. What I thought would solve it would be to return a promise in the factory that retrieves the map data. This didn't work though.

Can anyone advise on what I'm doing wrong?

In the console I see this:

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

Line 586 refers to this line (in the directive):

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

I get the lastElement like so:

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

Factory:

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; }]);

Controller:

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>

最满意答案

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); } });

map.getMapInfo() returns a promise but you are treating it as if it returns an array in the controller

Also you keep overwriting the properties of the same object in your for loop and pushing the same object reference into an array. This means all elements in the array will end up with the last value set in the loop...because they are all references to one object

Replace

$scope.mapLocations = map.getMapInfo();

With

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); } });