Angular-UI $scope.myMap is undefined

Question

I'm trying to $watch myMap but it never fires. I've narrowed it down to having used ui-if (if I remove the ui-if, $scope.myMap is the proper google maps object). However I need to keep the ui-if in order to get ui-map to wait for my AJAX/Db query to finish.

~~Why isn't myMap being added to scope (and how do I get it to)?~~

Plunker

Edit I see from this GitHub issue that ui-if creates its own scope. So how do I access its scope / wherever myMap now lives? Also, why does ui-if create a new scope?

bmleite · Accepted Answer · 2013-01-31 01:50:39Z

2

Create a model on your GoogleMaps controller:

$scope.model = {};

Pass the model as reference to the ui-map directive:

ui-map="model.myMap"

Watch for changes:

$scope.$watch('model.myMap', function(map){
    ...
}

This way you avoid the creation of the myMap property inside the ui-if scope.

Also check this documentation for more information on the prototypical inheritance of scopes.

answered Jan 31, 2013 at 1:50

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jakob Jingleheimer Over a year ago

Ahah! Now the myMap object is available (and so is the locations object); everything seems to be going swimmingly, but then the markers don't appear on the map: plnkr.co/edit/khlQVB I tried inspecting the google-map object of one that had markers to compare with mine (to see if my map object has registered them), but I couldn't figure out which property holds marker data (thought it might be in overlayMapTypes or qc.

Jakob Jingleheimer Over a year ago

figured it out! instead of setting var latLng = new google.maps.LatLng( $scope.locations[i][0],$scope.locations[i][1]); I had to hold each $scope.locations[i][#] in its own parameter, and THEN run new google.maps.LatLng.

ProLoser · Accepted Answer · 2013-01-31 01:17:28Z

2

You can specify where you want the object to be stored, including on a parent scope:

ui-map="$parent.myMap"

Although this is considered to be semi unreliable (as any number of directives may create additional scope layers) and you may want to consider setting it to a property of an object.

answered Jan 31, 2013 at 1:17

ProLoser

4,6152 gold badges18 silver badges23 bronze badges

1 Comment

Jakob Jingleheimer Over a year ago

ohh, that's good to know (that I can specify storing it on the parent scope that way). Thanks! I think I would prefer setting it to a property of an object. @bmleite 's answer seem to be exactly that but strangely the markers don't appear on the map.

Collectives™ on Stack Overflow

Angular-UI $scope.myMap is undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related