以模式显示来自 Google 地方信息的结果似乎不起作用

Question

我正在尝试使用 AngularJS 指令在模式中实现“位置自动完成地址表单”。
它在模态之外对我有用，但在模态内部，下拉列表显示在模态后面...
我以Google Developers
为例 我设置了一个Plunker，只是为了测试它。

function openEditModal() {
        console.log("modal open!");            
        var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Save role',
            headerText: 'Edit role',
            bodyText: '',
            scope:$scope
        };

        Modal.showModal({ templateUrl: 'myModalContent.html', size: 'lg' }, modalOptions).then(function (result) {

            console.log("save!");

        });
}

$scope.geolocate = function () {
        if ($scope.details1 !== undefined) {
            var place = $scope.details1;
            if (place !== "") { //getting the data from the Google Places
                for (var i = 0; i < place.address_components.length; i++) {
                    var addressType = place.address_components[i].types[0];
                    //if (componentForm[addressType]) {
                    var val = place.address_components[i]; 
                    console.log(val);
                    //document.getElementById(addressType).value = val;
                    //}
                }
            }
        }
};

这是模态 HTML 部分：

<script type="text/ng-template" id="myModalContent.html">     

    <div class="wrapper" id="editModal">
        <div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>            
        <div class="modal-body">
            <form novalidate>
                <fieldset>
                    <div class="container">
                        <div class="fleft">
                            <label for="name">Role: </label>                                
                            <input type="text" ng-model="currentItem.roleName" required />
                        </div>
                        <div>
                          <input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1" placeholder="Enter your address" />
                        </div>
                </fieldset>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
            <button class="btn btn-primary" ng-click="modalOptions.ok()">{{modalOptions.actionButtonText}}</button>
        </div>            
    </div><!-- /wrapper -->

</script>

Demo

Answer 1

我的解决方案是将下拉菜单的z-index 更改为模式上方：

.pac-container {
    z-index: 2000;
}

模态本身对我来说有一个z-index 或1040。