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';

angular
.module('crmApp')
.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();
model.$setViewValue(element.val());
$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"/>



Screen:
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 )