2

I'm using ngMap with Ionic 1.2.x and I've put together custom-control that contains a places autocomplete directive that in a plain HTML test works, but when I put it inside the ionic application and open it in a modal the on-place-changed event never triggers when clicking on the places autocomplete prediction. When I mouse over the list of place predictions the mouse cursor icon doesn't change seemingly indicating the elements are not available for clicking.

UPDATE

I found a reference to this issue on GitHub, but the solutions don't appear to work when in a modal according to the last couple posts where data-tap-disabled="true" is used on pac-container.

I've attached an abridge CodePen of the issue. It's really easy to replicate.

DIRECTIVE

<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>
4

2 回答 2

3

使用这个修复得到了这个工作，但我们不喜欢在我们的 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();
    });
};
于 2016-04-30T09:08:57.990 回答
1

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

我将此代码放入我的 ionic index.html ：

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

这将在您使用谷歌在您的应用中放置自动完成功能的任何地方自动禁用 TAP（使预测选择不可能的事情）。

于 2016-09-18T21:51:43.023 回答