1

angular-google-maps ディレクティブを使用しています。マップを表示するために ui-boostrap モーダルを使用しています。mapSelectLocation.html という名前のファイルでモーダル コンテンツを定義しています。モーダルを開く方法は次のとおりです。

var modalInstance = $modal.open({
    templateUrl: '/path/to/templates/mapSelectLocation.html',
    controller: 'mapSelectLocationController'
});

mapSelectLocation.html:

<div class='modal-body'>
    <ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'>         </ui-gmap-google-map>
</div>

mapSelectLocationController:

function mapSelectLocationController($scope, $modalInstance) {
    $scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
    $scope.readyForMap = true;
}

これにより、ポップアップが表示され、マップが適切にレンダリングされます。ただし、モーダルを閉じて再度開くと、マップが正しくレンダリングされません。マップ エリアの大部分はグレー表示され、マップのごく一部が左上隅に表示されます。

ただし、mapSelectLocation.html のコンテンツをファイル自体から同じページの角度テンプレート スクリプトに移動すると、問題なく開いて再度開き、毎回正しくレンダリングされます。

<script type="text/ng-template" id="mapSelectLocation.template">
    <div class='modal-body'>
        <ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'>         </ui-gmap-google-map>
    </div>
</script>

もちろん、templateUrl も更新します。

var modalInstance = $modal.open({
    templateUrl: 'mapSelectLocation.template',
    controller: 'mapSelectLocationController'
});

モーダルコンテンツを別のファイルに入れることがうまくいかない理由を教えてください。angularスクリプトテンプレートを使用する必要があるよりも、別々に保持したいと思います。

4

1 に答える 1

2

解決策を見つけました。Angular-Google-Maps は、ui-map の準備が整ったことを知らせる uiGmapIsReady サービスを提供します。この promise を使用すると、マップを更新する refresh() 関数を使用できるマップのコントロール プロパティにアクセスできるコールバック関数を渡すことができます。これにより、マップを更新して、その後のモーダルを開いたときに正しくレンダリングできます。

解決策の例を次に示します。

var module = angular.module('test', ['ui.bootstrap', 'uiGmapgoogle-maps']);
module.controller('controllerA', ['$scope', '$modal', 'uiGmapIsReady', controllerA]);
module.controller('mapSelectLocationController', ['$scope', '$modalInstance', 'uiGmapIsReady', mapSelectLocationController]);

function controllerA($scope, $modal, uiGmapIsReady) {

    $scope.openMapDialog = function () {
        var modalInstance = $modal.open({
            templateUrl: '/app/mapTemplate.html',
            controller: 'mapSelectLocationController'
        });

        modalInstance.result.then(function (test) {
            debugger;
        });
    }
}

function mapSelectLocationController($scope, $modalInstance, uiGmapIsReady) {
    $scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
    $scope.readyForMap = true;
    $scope.control = {};

    uiGmapIsReady.promise().then(function (maps) {
        $scope.control.refresh();
    });
}

module.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
});

そしてテンプレート：

<div class="modal-body">
<h4>Click a location on the map</h4>
<hr />
<div class="row">
    <ui-gmap-google-map center='map.center' control='control' zoom='map.zoom'></ui-gmap-google-map>
</div>

<h4>Available Addresses</h4>
<hr />
<div class="row">
    <div class="grid no-border">
        <div class="grid-body">
            Addresses will be listed here...
        </div>
    </div>
</div>

Angular Google マップ v2 以下については、この SO の回答を参照してください: Angular Google マップが getGMap をコントロール オブジェクトに追加するのを待つ 方法

于 2015-03-09T01:37:28.837 に答える