在 Ionic 模式下无法点击 Google Places 自动完成建议

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 类存在 z-index 问题，但无论如何更改此 z-index 都无法解决我的问题。

使用元素检查器，我认为更多的是元素出现在 DOM 中的顺序问题，因为包括 pac-container 在内的自动完成元素会立即动态附加在打开的正文标记之后，然后呈现模式获取就在结束 body 标记之前，因此无论 z-index 如何，pac 容器似乎都位于模态的“下方”。

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

Answer 1

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

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