2016-04-30 3 views
2

Ich benutze ngMap mit Ionic 1.2.x und ich habe Custom-Control, das eine Places Autocomplete-Direktive enthält, die in einem einfachen HTML-Test funktioniert, aber zusammengestellt Wenn ich es in die ionische Anwendung einfüge und es in einem Modal öffne, wird das On-Place-Changed-Event niemals ausgelöst, wenn ich auf die Place-Autocomplete-Vorhersage klicke. Wenn ich mit der Maus über die Liste der Ortsvorhersagen blicke, ändert sich das Mauscursor-Symbol scheinbar nicht, wodurch angezeigt wird, dass die Elemente zum Klicken nicht verfügbar sind.Ionic Modal mit ngMap mit Google Place Autocomplete wird keine Vorhersage auswählen

UPDATE

fand ich einen Hinweis auf dieses Problem auf GitHub, aber die Lösungen nicht angezeigt, wenn in einem modalen arbeiten nach den letzten paar Beiträge, wo data-tap-disabled="true" auf pac-container verwendet wird.

Ich habe eine Abkürzung CodePen of the issue beigefügt. Es ist wirklich einfach zu replizieren.

RICHTLINIE

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

Antwort

3

erhielt diese Arbeit dieses fix verwenden, aber wir haben nicht wie jQuery in unseren AngularJS Anwendungen mit, damit ich es ein bisschen in der AngularJS API mit ein bisschen heimisch sein geändert JavaScript.

Markup

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

Nur für den Fall, ich hatte das gleiche Problem und hier ist die Lösung, die ich gebaut:

ich diesen Code setzen in Mein ionic index.html:

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

Dies wird TAP automatisch deaktivieren (die Sache, die die Vorhersageauswahl unmöglich macht), wo immer Sie Google Places Autocomplete in Ihrer App verwenden.

Verwandte Themen