AngularUI - Google Maps - карта неопределенные

Question

Я пытаюсь использовать директиву GoogleMaps таким образом:

Методы контроллера

$scope.myMarkers = []; 

$scope.mapOptions = { 
    center : new google.maps.LatLng(35.784, -78.670), 
    zoom : 15, 
    mapTypeId : google.maps.MapTypeId.ROADMAP 
}; 

$scope.addMarker = function($event) { 
    $scope.myMarkers.push(new google.maps.Marker({ 
     map : $scope.myMap, 
     position : $event.latLng 
    })); 
}; 

UpdateLocation.html

<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div> 

<div id="map_canvas" ui-map="myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div> 

Карта отображается отлично, но в методе addMarker Я получаю неопределенный, когда 0 Выполняется.

Answer 1

Я полагаю, что у вас есть новая область, созданная где-то между вашим определением контроллера и декомбайтом ui-map, и что происходит, так это то, что свойство «myMap» создается в этой области действия, а не в области вашего контроллера.

Чтобы избежать подобных проблем, предоставьте директиву ui-map надлежащую модель. Например:

Контроллер:

$scope.model = { myMap: undefined }; 

HTML:

<div id="map_canvas" ui-map="model.myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div> 

Это заставит ui-map директиву для хранения содержимого карты внутри $scope.model.myMap и вследствие прототипически наследования областей, то $scope.model объект будет доступен в дочерних областях, но всегда будет принадлежать родительской области - области вашего контроллера.