Như Quỳnh Trần Nữ Như Quỳnh Trần Nữ - 29 days ago 7
AngularJS Question

autocomplete location angularjs not work on popup

In my application, I use google location autocomplete to suggest location when I enter some text. without popup then location autocomplete work fine but when I use location autocomplete on a popup then it not working.
I use a directive

(function() {
'use strict';

.directive('googleplace', directiveFunction);
directiveFunction.$inject = ['$rootScope'];

function directiveFunction($rootScope) {
return {
require: '?ngModel',
scope: {
ngModel: '=',
details: '=?'
link: function(scope, element, attrs, model) {
var options = {
types : ['geocode']
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
$rootScope.$broadcast('place_changed', scope.details);


then I open popup but not working:

<input next-on-enter type="text" googleplace ng-model="vm.origin" class="form-control" placeholder="Vui lòng nhập xuất xứ" maxlength="255" name="origin"/>

google location autocomplete

Help me, please !!!

Answer Source

googleplace directive you write missing something to work. You need modify directive same as example in link: http://plnkr.co/edit/irQiP6waYf5kE6B4NCBe?p=preview

The input that apply autocomplete change to:

<input next-on-enter type="text" ng-autocomplete ng-model="vm.origin" options="autoCompleteOptions" details="autoCompleteDetails" class="form-control" placeholder="Vui lòng nhập xuất xứ"  maxlength="255" name="origin"/>

( origin post: https://github.com/angular-ui/bootstrap/issues/693 )