Question

我试图在Ionic项目的模式中渲染Google地方自动填充功能。

我使用模板渲染模态：

<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的自动完成元素会在开始体标记之后立即动态附加，然后模态get在关闭body标签之前呈现，所以无论z-index如何，pac-container都在＆＃39;下面？模态。

除此之外，我真的被卡住了。任何建议都会受到欢迎。

Answer 1

在Ionic论坛上提出一些很棒的建议之后，解决方案就是：

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

在Ionic模式下，Google商家信息自动填充建议无法点击

1 个答案: