Google 在 Ionic 模式下放置自动完成建议不可点击

Question

我正在尝试在 Ionic 项目的模式中呈现 Google Places Autocomplete。

我正在使用模板渲染模式：

<script id="modal.html" type="text/ng-template">
  <div class="modal">
    <header class="bar bar-header bar-light">
      <h1 class="title">Create event</h1>
      <div class="button button-clear" ng-click="close()"><span class="icon ion-close"></span></div>
    </header>
    <content has-header="true" padding="true">
              <label class="item item-input item-light">
                <input type="text" g-places-autocomplete ng-model="event.venue" placeholder="Venue/Location">
              </label>
    </content>
  </div>
</script>

Google 地点建议在正确的位置按预期呈现，但无法点击。大量网络搜索表明 pac-container class 存在 z-index 问题，但更改此 z-index 并不能解决我的问题。

使用元素检查器，我认为元素出现在 DOM 中的顺序是一个更大的问题，因为包括 pac-container 在内的自动完成元素会立即动态附加在开始的 body 标记之后，然后模态 get 就在结束 body 标记之前呈现，因此无论 z-index 是什么 pac-container 似乎都是 'underneath' 模态。

除此之外，我真的被困住了。欢迎任何建议。

Answer 1

在 Ionic 论坛上听取了一些很棒的建议后，解决方案是：

.pac-container {
        z-index: 3000 !important;
        }
.modal-open {
            pointer-events: auto !important;
        }

Google 在 Ionic 模式下放置自动完成建议不可点击

Google Places Autocomplete suggestions not clickable when in Ionic modal

google-places

angularjs

ionic-framework