ng-blurは$ scope変数をオーバーライドしていますか？モデルが$ scope変数ionic/angularで更新されない

Question

私はモーダルでポップアップするGoogleマップから、またはGoogle Mapのオートコンプリートから、ユーザーが場所を選択できるイオン/角度のウェブアプリを作っています検索ボックス。

最高のユーザーエクスペリエンスのために、マップ上でユーザーが選択したアドレスを検索ボックスに入力する必要があります。

地図上の場所を最初に選択した場合は、機能する検索ボックスに入力して場所を変更します。しかし、最初に検索ボックスに場所を入力してから地図上の場所を選択しようとすると、入力ボックスのテキストは同じままです。私はそれはあなたがオートコンプリートがここ

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

の作業を取得する必要があり、イオンディレクティブをどうすると思い

は、検索ボックスの宣言

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

である私は、検索ボックスに関連付けられて、NG-モデルを持っています

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

そして、私はautocompの$ scope.inputText変数を更新していますそのような

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

とマップリスナーで：そうのようなLETEリスナー

$scope.inputText = address.formatted_address; 

はぼかし機能はNG-モデルを上書きしていますか？私は間違っているのですか？

誰にでも私のngモデルの更新情報が表示されていますが、マップと検索ボックスを持っていても、

任意の助けをいただければ幸いですおかげで、この非常に自然の

Answer 1

質問はすべてこの場所に存在し、かつ説明した問題は、サイトの検索が失敗するたびにように異なっています。

単純な答えは、$ scopeの直下にストア値を入れないことです。これはマナーに関するものではなく、その理由を理解すれば不可欠です。下のリンクで詳細を読むことができます。

あなたのケースを解決するために、あなたは

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

がから関連する部分を引用すると、お使いのコントローラやハンドラに

$scope.address.formatted = ... 

をこのような何かを行うので、あなたの意見のようにそれらにアクセスする必要がありますリンク、

違いは、データをスコープに直接格納していないことです。 ng-modelが書き込みをしたいとき、実際には読み込みを行い、書き込みを行います。スコープからpersonプロパティを読み込みます。これは、子スコープが上向きに検索を行うため、子スコープから機能します。一度それが人を見つけると、person.first_nameに書き込みますが、問題はありません。それだけで動作します。ここ

そして

はリンクです： Nested Scopes in AngularJS on jimhoskins.com

これは数ヶ月古いことを見て、あなたはすでにそれを解決し、とにかく答えを左may've。 これが役立つことを願っています。