повторно использовать автозаполнение ввода в Google-местах после навигации по страницам

Question

повторно использовать автозаполнение ввода в Google-местах после навигации по страницам

0

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

Я повторно использую поле ввода мест после перехода на страницу, содержащую поле ввода автозаполнения мест. С методом element.replaceWith() он работает хорошо.

После замены элемента я не могу сбросить ввод кнопкой "Сброс". Как связать новую сгенерированную область с кнопкой "Сброс" и старыми переменными области. Потому что старая область и элементы уничтожаются событием навигации?

    .factory('myService', function() {
  var gPlace;
  var s, e;
  var options = {
      types: [],
      componentRestrictions: {country: 'in'}
  };  
    function init() {

  }
  function set(element, scope) {
    console.log('set');
    if (!gPlace) {
      e = element;
      gPlace = new google.maps.places.Autocomplete(element[0], options);

      google.maps.event.addListener(gPlace, 'place_changed', function() {
          scope.$apply(function() {
              scope.place.chosenPlace = element.val();
          });
      });   
    } else {
      element.replaceWith(e);   
    }
  }
  init();
    return {
    'init':init,
    'set':set
  };
});

навигация (уничтожение элемента и области) будет смоделирована в этой панели с помощью директивы ng-if которая будет активирована кнопкой "удалить".

см. здесь plunk

usher 28 июль 2016, в 23:49

Источник

Теги:

angularjs

google-maps

angularjs-scope

google-places

replacewith

1 ответ

Ещё вопросы

Muli Yulzary · Answer 1 · 2016-07-28T21-15-00.000Z

Если вы хотите, вы можете создать службу, которая содержит последнее выбранное место, и делиться ею между контроллерами и директивами:

.service('myPlaceService', function(){
 var _place;

 this.setPlace = function(place){
  _place = place;
 }

 this.getPlace = function(){
  return _place;
 }

 return this;
});

Затем создайте директиву, использующую эту службу:

.directive('googlePlaces', function(myPlaceService) {
 return {
  restrict: 'E',
  scope: {
   types: '=',
   options: '=',
   place: '=',
   reset: '='
  },
  template: '<div>' + 
   '<input id="gPlaces" type="text"> <button ng-click="resetPlace()">Reset</button>' +
   '</div>',
  link: function(scope, el, attr){
    var input = document.querySelector('#gPlaces');
    var jqEl = angular.element(input);
    var gPlace = new google.maps.places.Autocomplete(input, scope.options || {});
    var listener = google.maps.event.addListener(gPlace, 'place_changed', function() {
      var place = autocomplete.getPlace();
      scope.$apply(function() {
          scope.place.chosenPlace = jqEl.val();
          //Whenever place changes, update the service.
          //For a more robust solution you could emit an event using scope.$broadcast
          //then catch the event where updates are needed.
          //Alternatively you can $scope.$watch(myPlaceService.getPlace, function() {...})
          myPlaceService.setPlace(jqEl.val());
      });

    scope.reset = function(){
      scope.place.chosenPlace = null;
      jqEl.val("");
     }

    scope.$on('$destroy', function(){
     if(listener)
      google.maps.event.removeListener(listener);
    });
   });   
  }
 }
});

Теперь вы можете использовать его так:

<google-places place="vm.place" options="vm.gPlacesOpts"/>

Где:

vm.gPlacesOpts = {types: [], componentRestrictions: {country: 'in'}}

спасибо за помощь, но я не спасу последнее место. Я должен повторно использовать ввод мест без повторной инициализации каждый раз.