Ionic中$ionicModal显示高德地图

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

//高德地图Item
.directive('dynamicsAmap', function(){
    return {
        restrict: 'E',
        replace: true,
        scope:{
            title: '=',
            value: '='
        },
        template: '' +
                    '{{title}}' +
                    '' +
                    '{{value}}' +
                    '' +
                  '',
        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

    
        关闭
        
地图选择
    
    
          
        

          
        
    

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

屏幕快照 2016-09-30 下午4.16.25.png