Question

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

更新

我在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中的一些原生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自动完成功能的ngMap的离子模态不会选择预测

2 个答案: