在頁面導航後重復使用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 
    }; 
}); 

---

導航（元件和範圍的破壞）將在此普拉克由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'}}