Ionic中$ionicModal显示高德地图

在项目中需要在$ionicModal中显示高德地图时需要自己定义一个方法，在模式框显示后再调用高德地图初始化方法

//高德地图Item
.directive('dynamicsAmap', function(){
    return {
        restrict: 'E',
        replace: true,
        scope:{
            title: '=',
            value: '='
        },
        template: '<a class="item" ng-click="openModal()">' +
                    '{{title}}' +
                    '<span class="item-note">' +
                    '{{value}}' +
                    '</span>' +
                  '</a>',
        controller: function($scope, $state, $ionicModal){
            $ionicModal.fromTemplateUrl('templates/modal/modal-amap.html', {
                scope: $scope
              }).then(function(modal) {
                $scope.modal = modal;
            });

            $scope.openModal = function(){
                $scope.modal.show();
                //高德地图初始化方法
                var map = new AMap.Map('container', {
                               resizeEnable: true,
                               center:[116.39,39.9],
                               zoom:11
                           });
              }
        }
    }
});

templates/modal/modal-amap.html

<ion-modal-view>
    <ion-header-bar class="bar-calm">
        <button class="button button-clear" ng-click="modal.hide()">关闭</button>
        <h1 class="title">地图选择</h1>
    </ion-header-bar>
    <ion-content>
          <!-- 浏览器测试 -->
        <div id="container" style="height: 350px; width: 730px"></div>
          <!-- 手机测试 -->
        <!-- <div id="container" style="height:100%; width:100%"></div> -->
    </ion-content>
</ion-modal-view>

这里特别要注意的是div容器，原来在浏览器里怎么也显示不出来，原来是因为ionic的模式框中的宽高都是自动适配的，后来写了两个div，最终手机上还是用百分比来适配
最后上效果图