为什么ng-map angular指令在模态打开时不起作用？ （在plunker中）

Question

我的角度模块：

我使用了ng-map指令，我在这里输入了坐标：

angular.module('ngMap').controller('mapCtrl', function ($scope) {
    //Open Modal Function
    $scope.open = function() { //Open Modal Function
        $('#warningModal').modal('show');
    }
    $scope.vm={data:[],position:[]};
    $scope.vm.data = [
      { foo: 1, bar: 1 },
      { foo: 2, bar: 2 },
      { foo: 3, bar: 3 },
      { foo: 4, bar: 4 },
      { foo: 5, bar: 5 },
      { foo: 6, bar: 6 },
      { foo: 7, bar: 7 }
    ];
    $scope.vm.positions = [
      { pos: [40.71, -74.21] },
      { pos: [40.72, -74.20] },
      { pos: [40.73, -74.19] },
      { pos: [40.74, -74.18] },
      { pos: [40.75, -74.17] },
      { pos: [40.76, -74.16] },
      { pos: [40.77, -74.15] }
    ];
});

HTML：

我使用了两种风格，第一种是在html地图中，第二种是在模态地图中。 地图在html中工作，但是其他没有运行。

<div ng-controller="mapCtrl">

<button class="btn btn-default" ng-click="open()">Open map!</button>

<div id="warningModal" class="modal fade">
    <div class="modal-dialog  modal-sm" style="padding-top: 40px;">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="panel-title" id="voteLabel"><span class="glyphicon glyphicon-remove"></span></h4>
            </div>
            <div class="modal-body">
                <ng-map zoom="11" center="[40.74, -74.18]">
                    <marker ng-repeat="p in vm.positions"
                            position="{{p.pos}}"
                            data="{{data[$index]}}"
                            on-click="showData()" 
                            title="pos: {{p.pos}}"></marker>
                </ng-map>
            </div>
        </div>
    </div>
</div>
<ng-map zoom="11" center="[40.74, -74.18]">
    <marker ng-repeat="p in vm.positions"
            position="{{p.pos}}"
            data="{{data[$index]}}"
            on-click="showData()" ;
            title="pos: {{p.pos}}"></marker>
</ng-map>

Plunker Link： http://embed.plnkr.co/LHzOQL930BqVco6gQhqX/

Answer 1

似乎模态中的地图未初始化，因为模态首先有display: none;。添加此css之后：

.modal {
  display: block;
  z-index: -1;
}

.modal.fade.in {
  z-index: 1050;
}

以模态显示地图。