0

Я создаю веб-приложение в ионном/угловом формате, где пользователь может выбрать местоположение либо с карты 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(); 
    }); 
}; 

Здесь объявлению SearchBox

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

У меня есть нг-модель, связанную с SearchBox

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

и я обновляю переменную $ scope.inputText в autocomp Lete слушатель так:

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

и в карте слушателя, как так:

$scope.inputText = address.formatted_address; 

переопределяют ли функция размытия в нг-модель? Неужели я ошибаюсь?

Может ли кто-нибудь увидеть, почему моя версия ng-модели обновляется, если я получил карту, а затем поиск, но не поиск, а затем карту?

Любая помощь будет высоко ценится благодаря

+0

Можете ли вы разместить образец на plunker или jsfiddle? – Hoyen

ответ

0

Вопросы этой самой природе существуют во всем этом месте, и описанная проблема настолько отличается каждый раз, когда поисковый сайт не удается.

Простой ответ: не хранить значения непосредственно под $ scope. Речь идет не о манерах, а о императиве, когда вы понимаете, почему. Вы можете узнать больше об этом по ссылке ниже.

Чтобы решить дело, вы должны сделать что-то вроде этого в контроллере или обработчиков,

$scope.address.formatted = ... 

и доступ к ним, как это в ваших взглядах,

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

Цитируя соответствующий раздел из ссылка,

Разница заключается в том, что мы не храним данные непосредственно в области. Теперь, когда ng-model хочет писать, на самом деле читает, а затем пишет. Он считывает свойство person из области действия, и это будет работать с дочерней областью, потому что область содержимого будет искать вверх для чтения. Когда он найдет человека, он пишет person.first_name, что не представляет проблемы. Это просто работает.

А вот ссылка: Nested Scopes in AngularJS on jimhoskins.com

Видя, что это несколько месяцев, и вы may've уже решена, но все равно оставили ответ. Надеюсь, это поможет.

 Смежные вопросы

  • Нет связанных вопросов^_^