3

この方法で 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では実行時に未定義になり$scope.myMapます。

4

1 に答える 1

3

コントローラー定義とdivの間のどこかに新しいスコープが作成されていると思います。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オブジェクトは子スコープで使用できますが、常に親スコープ (コントローラーのスコープ) に属します。

于 2013-02-18T14:22:10.677 に答える