Is there something special I need to do to access objects inside $timeout functions?
I get errors saying routes is undefined when I try and access it in the $timeout function, but outside the $timeout function (where the console log is) it logs the object and everything in it is as expected:
$scope.drawRoutes = function(routes) {
console.log(routes);
for (var i = 0; i < routes.length; i++) {
$timeout(function() {
MapService.directionsService.route(routes[i], function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
MapService.direction_renderers.push(new google.maps.DirectionsRenderer());
MapService.direction_renderers[MapService.direction_renderers.length - 1].setMap(MapService.gmaps.map);
MapService.direction_renderers[MapService.direction_renderers.length - 1].setDirections(response);
$scope.connectors_created += 1;
$scope.$digest();
}
});
}, 1000);
}
};
Here the problem is the use closure variable i
within the timeout callback function... inside each callback instance i
refers to the same closure instance... so when the loop is exited i
has the value routes.length
which results in accessing routes[routes.length]
in the callbak which will be undefined.
Assuming route
s is an array object, you can use the forEach() iterator function to solve the problem
$scope.drawRoutes = function (routes) {
console.log(routes);
angular.forEach(routes, function (route, idx) {
$timeout(function () {
MapService.directionsService.route(route, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
MapService.direction_renderers.push(new google.maps.DirectionsRenderer());
MapService.direction_renderers[MapService.direction_renderers.length - 1].setMap(MapService.gmaps.map);
MapService.direction_renderers[MapService.direction_renderers.length - 1].setDirections(response);
$scope.connectors_created += 1;
$scope.$digest();
}
});
}, (idx + 1) * 1000);
})
};