ng-map（離子）運行，但中心位於左上方模態

Question

我正在將角度圖（ngmap）運行到模態對話框中。它運行良好，但中心顯示在模態窗口的左上角（不居中）。

我啓動模式有：

<a class="button-circle icon ion-ios-navigate-outline padding" ng-click="modal.show()"></a> 

的模式是到HTML（如腳本）：

<script id="templates/modal.html" type="text/ng-template"> 
    <ion-modal-view style="width: 100%;"> 
    <ion-header-bar class="bar bar-header bar-positive"> 
     <h1 class="title">¿Dónde está?</h1> 
    </ion-header-bar> 
    <ion-content class="padding" scroll="false" data-tap-disabled="true"> 
     <map zoom="17" center="{{data.latitude}}, {{data.longitude}}" style="width:100%; height: 90%;"> 
     <marker position="{{data.latitude}}, {{data.longitude}}"></marker> 
     </map> 
     <button class="button button-full button-positive" ng-click="modal.hide()">Close</button> 
     </ion-content> 
    </ion-modal-view> 
</script> 

最後，這是控制器：

.controller('MapCtrl', ['$scope', '$http', '$state', '$ionicModal', function($scope, $http, $state, $ionicModal){ 
    $http.get('app-data/cities.json') 
    .success(function(data){ 
     $scope.data = data.places[$state.params.id]; 

    $ionicModal.fromTemplateUrl('templates/modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
     }).then(function(modal) { 
     $scope.modal = modal  
     }) 

     $scope.openModal = function() { 
     $scope.modal.show(); 
     }; 

     $scope.closeModal = function() { 
     $scope.modal.hide(); 
     }; 

     $scope.$on('$destroy', function() { 
     $scope.modal.remove(); 
     }); 

     }); 
}]) 

任何建議？謝謝;-)

Answer 1

嘗試分析這個與醜陋的「解決方法」（$超時）工作的Plunker。

http://plnkr.co/edit/4cgdHeiBYWlxKEuoGsl7?p=preview

在$ HTTP成功處理程序我試圖用NgMap.getMap（）。然後，（），以獲得直接映射對象和手動設置中心。那麼我就不能uderstand爲什麼它不正確地圖中心，但它需要觸發「center_changed的」手動，然後再setCenter ...

$http.get('cities.json') // $http.get('app-data/cities.json') 
.success(function(data) { 
    //$scope.data = data.places; //data.places[$state.params.id]; 
    $scope.zoom = 6; 

    NgMap.getMap().then(function(map) { 
    var cx = map.getCenter(); 
    var txt = "center is: lat="+cx.lat()+", lng="+cx.lng(); 

    map.setCenter({lat: data.places.latitude, lng: data.places.longitude}); 
    $scope.data = data.places; 

    console.log(txt); 
    $scope.trace = txt; 
    $scope.map = map; 
    google.maps.event.trigger(map, "center_changed"); 

    $timeout(function() { 
     $scope.center(); 
    }, 2000); 

    }); 

    ... 

我覺得有它與谷歌的一些干擾離子態的CSS地圖。事實上，它在一個簡單的離子視圖中工作得很好，而它在模態內具有這種惱人的行爲。