使用 Google Place Autocomplete 的 ngMap Ionic Modal 不会 Select 预测

Question

我将 ngMap 与 Ionic 1 一起使用。2.x 并且我将自定义控件放在一起，其中包含一个在普通 HTML 测试中有效的位置自动完成指令，但是当我把它放在离子应用程序中并以模式打开它时，当点击位置自动完成预测时，就地更改事件永远不会触发。当我将鼠标悬停在位置预测列表上时，鼠标光标图标没有改变，似乎表明这些元素不可用于单击。

更新

我在 GitHub 上找到了对这个问题的引用，但是根据最后几篇文章，在 pac-container 上使用 data-tap-disabled="true" 的模态中，解决方案似乎不起作用=].

我附上了一个删节 CodePen of the issue。真的很容易复制。

指令

<ng-map id="gmap">

    // ...

    <custom-control class="gmap-place-autocomplete-control-container"
                    position="TOP_CENTER">

            <input placeholder="Search for places"
                   types="{{ createEventCtrl.types }}"
                   ng-model="createEventCtrl.address"
                   on-place-changed="createEventCtrl.placeChanged()"
                   places-auto-complete>

    </custom-control>

    // ...

</ng-map>

Answer 1

使用 fix 可以正常工作，但我们不喜欢在 AngularJS 应用程序中使用 jQuery，因此我将其稍微更改为在 AngularJS 中] API 带有一点原生的 JavaScript.

标记

<input placeholder="Search for places" 
       ng-model="locationCtrl.event.location"
       on-place-changed="locationCtrl.placeChanged()"
       places-auto-complete
       ng-focus="locationCtrl.disableTap($event)">

控制器

vm.disableTap = function(event) {

    var input = event.target;

    // Get the predictions element
    var container = document.getElementsByClassName('pac-container');
    container = angular.element(container);

    // Apply css to ensure the container overlays the other elements, and
    // events occur on the element not behind it
    container.css('z-index', '5000');
    container.css('pointer-events', 'auto');

    // Disable ionic data tap
    container.attr('data-tap-disabled', 'true');

    // Leave the input field if a prediction is chosen
    container.on('click', function(){
        input.blur();
    });
};

Answer 2

以防万一，我遇到了同样的问题，这是我构建的解决方案：

我将此代码放入我的离子 index.html :

<script>
 $(document).on({
     'DOMNodeInserted': function () {
         $('.pac-item, .pac-item span', this).attr("data-tap-disabled","true");
     }
 }, '.pac-container');
</script>

这将在您使用的任何地方自动禁用 TAP（使预测选择变得不可能的东西）google 在您的应用程序中放置自动完成功能。

使用 Google Place Autocomplete 的 ngMap Ionic Modal 不会 Select 预测

Ionic Modal with ngMap using Google Place Autocomplete Won't Select Prediction

google-maps

ionic-framework

ng-map