ré-utiliser google-lieux saisie semi-automatique saisie après la navigation de la page

Question

J'ai besoin dans une application angularjs page unique d'une saisie semi-automatique google-lieux, qui doit fonctionner comme un service et doit être initialisé une fois à l'exécution. En cas de navigation, l'élément initialisé goolge-places et la portée appropriée sont détruits. Je vais réutiliser le champ de saisie des lieux après avoir navigué jusqu'à la page contenant le champ de saisie de saisie semi-automatique des lieux. Avec la méthode element.replaceWith() cela fonctionne bien.

---

Après avoir remplacé l'élément, je ne peux pas réinitialiser l'entrée par le bouton « reset ». Comment puis-je lier la nouvelle portée générée au bouton "reset" et aux anciennes variables de portée. Parce que l'ancien périmètre et les éléments sont détruits par l'événement de navigation?

.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 
    }; 
}); 

---

la navigation (élément et la portée destruction) sera simulé dans cette Plunk par la directive ng-if qui sera déclenchée par le bouton « supprimer ».

see here plunk

Answer 1

Si vous voulez, vous pouvez créer un service qui tient le dernier endroit choisi et la partage entre les contrôleurs et les directives:

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

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

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

return this; 
}); 

Ensuite, créez une directive qui utilise ce service:

.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); 
    }); 
    }); 
    } 
} 
}); 

Maintenant vous pouvez l'utiliser comme ceci:

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

Où:

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