javascript - 自动完成位置 angularjs 不适用于弹出窗口

Question

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:

Help me, please !!!

Answer 1

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

应用自动完成功能的输入更改为:

<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"/>

(原帖:https://github.com/angular-ui/bootstrap/issues/693)