页面导航后重新使用 google-places 自动完成输入

Question

我需要在 angularjs 单页应用程序中使用 google-places 自动完成输入，该输入应作为服务运行并在运行时初始化一次。在导航的情况下，带有 goolge-places 的初始化元素和适当的范围被破坏。

---

导航到包含地点自动完成输入字段的页面后，我将重新使用地点输入字段。使用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
  };
});

---

导航（元素和范围破坏）将在此 plunk 中由 ng-if 指令模拟，该指令将由“删除”按钮触发。

see here plunk

Answer 1

如果您愿意，您可以创建一个服务来保存最后选择的位置并在控制器和指令之间共享：

.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'}}