google-maps - 使用 Google Place 自动完成的 ngMap 的 Ionic Modal 不会选择预测

Question

我正在使用ngMap使用 Ionic 1.2.x，我将自定义控件组合在一起，其中包含一个位置自动完成指令，该指令在纯 HTML 测试中有效，但是当我将其放入 ionic 应用程序中并在模态中打开它时，会发生 on-place-changed 事件单击地点自动完成预测时永远不会触发。当我将鼠标悬停在地点预测列表上时，鼠标光标图标似乎没有变化，表明元素不可单击。

更新

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

我附上了一个缩写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 中使用一些 native JavaScript。

标记

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

Controller

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();
    });
};