Nachnutzung Google-Orte zum automatischen Vervollständigung Eingabe nach Seitennavigation

Question

ich in einer AngularJS einzigen Seite Anwendung benötigen einen Google-Plätze zum automatischen Vervollständigung Eingang, die als Dienst ausgeführt wird und wird einmal zur Laufzeit initialisiert werden. Bei der Navigation werden das mit goolge-places initialisierte Element und der entsprechende Umfang zerstört.

---

Ich werde wiederverwenden die Orte Eingabefeld nach auf die Seite navigieren, um die Orte, die automatische Vervollständigung Eingabefeld enthält. Mit der Methode element.replaceWith() funktioniert es gut.

---

nachdem das Element zu ersetzen, kann ich zurückgesetzt die Eingabe nicht durch die "Reset" -Taste. Wie kann ich den neu generierten Bereich an die Schaltfläche "Zurücksetzen" und die alten Bereichsvariablen binden? Weil der alte Bereich und die alten Elemente durch das Navigationsereignis zerstört werden?

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

---

das Navigations (Element und Umfang zu zerstören) wird durch die Richtlinie in dieser ng-if Plunk simuliert werden, die durch die „Entfernen“ ausgelöst wird.

see here plunk

Answer 1

Wenn Sie möchten, dass Sie einen Service erstellen können, die zuletzt gewählte Ort und teilt es unter Controllern und Richtlinien gilt:

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

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

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

return this; 
}); 

Dann erstellen Sie eine Richtlinie, die diesen Dienst verwendet:

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

Jetzt können Sie es wie folgt verwenden:

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

Wo:

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