ng-blur überschreibt die $ scope-Variable? ng-model nicht update mit $ scope variable ionic/angular

Question

Ich mache eine Web-App in ionic/eckig, wo ein Benutzer einen Ort entweder aus einer Google Map, die in einem Modal erscheint, oder aus einer Google Map Autocomplete wählen kann Suchbox.

Für die beste Benutzererfahrung möchte ich, dass die Adresse, die der Benutzer auf der Karte auswählt, in die Suchbox eingegeben wird.

Wenn ich zuerst einen Ort auf der Karte auswähle, dann ändere den Ort, indem du das Suchfeld eingibst, das funktioniert. Aber wenn ich zuerst einen Ort in die Suchbox eintippe und dann einen Ort auf der Karte auswähle, bleibt der Text im Eingabefeld gleich.

Ich denke, es ist mit der ionischen Richtlinie Sie die automatische Vervollständigung Arbeits

$scope.disableTap = function(){ 
    container = document.getElementsByClassName('pac-container'); 
    // disable ionic data tab 
    angular.element(container).attr('data-tap-disabled', 'true'); 
    // leave input field if google-address-entry is selected 
    angular.element(container).on("click", function(){ 
     document.getElementById('searchBar').blur(); 
    }); 
}; 

Hier ist die searchbox Erklärung

var input = document.getElementById('searchBar'); 
var autocomplete = new google.maps.places.Autocomplete(input); 

Ich habe ein ng-Modell mit dem Suchfeld verbunden bekommen tun müssen,

<input type="text" id="searchBar" ng-focus="disableTap()" placeholder="Type address here..." 
ng-model="inputText"> 

und ich aktualisiere die Variable $ scope.inputText in der Autocomp lete Zuhörer wie so:

$scope.inputText = autocomplete.getPlace().formatted_address; 

und in der Karte Zuhörern wie so:

$scope.inputText = address.formatted_address; 

Ist die Unschärfefunktion des ng-Modells außer Kraft setzen? Verstehe ich das falsch?

Kann jemand sehen, warum mein ng-Modell aktualisiert, wenn ich Karte dann searchbox, aber nicht searchbox dann Karte bekomme?

Jede Hilfe wäre sehr dankbar dank

Answer 1

Fragen dieser Natur gibt es überall auf diesem Platz, und das beschriebene Problem ist so jedes Mal anders, dass die Website-Suche fehlschlägt.

Die einfache Antwort ist, speichern Sie Werte nicht direkt unter $ Scope. Hier geht es nicht um Manieren, sondern darum, wenn man das Warum versteht. Sie können mehr über den Link unten lesen.

Ihren Fall zu lösen, sollten Sie so etwas wie dies in Ihrem Controller oder Handler,

$scope.address.formatted = ... 

und greifen Sie wie so in Ihren Ansichten tun,

<input type="text" placeholder="..." ng-model="address.formatted" name="address.formatted"> 

den entsprechenden Abschnitt zitierten aus die Verbindung,

Der Unterschied ist, dass wir die Daten nicht direkt auf dem Umfang speichern. Wenn nun das ng-Modell schreiben will, liest es tatsächlich und schreibt dann. Es liest die person -Eigenschaft aus dem Bereich, und dies funktioniert von einem untergeordneten Bereich, da ein untergeordneten Bereich nach einem Lesevorgang nach oben sucht. Sobald es eine Person findet, schreibt es an person.first_name, was kein Problem ist. Es funktioniert einfach.

Und hier ist der Link: Nested Scopes in AngularJS on jimhoskins.com

Sehen, dass dies ein paar Monate alt ist und Sie may've es bereits gelöst, aber trotzdem die Antwort gelassen. Hoffe, das hilft.