Question

在我的应用程序中，当我输入一些文本时，我使用谷歌位置自动完成来建议位置。没有弹出窗口然后位置自动完成工作正常，但当我在弹出窗口上使用位置自动完成时，它无法正常工作。我使用指令

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

}）（）;

然后我打开弹出窗口但没有工作：

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

屏幕：

请帮帮我!!!

Answer 1

googleplace指令你写错了一些工作。您需要与链接中的示例相同的修改指令：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）

Answer 2

编辑与

相同的链接功能

link: function(scope, element, attrs, model) {
            var options = {
                types : ['geocode']
            };

            if(scope.gPlace === undefined) {
                scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
            }

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                var result = scope.gPlace.getPlace();

                if(result !== undefined) {
                    scope.$apply(function() {
                        scope.details = result;
                        model.$setViewValue(element.val());
                        $rootScope.$broadcast('place_changed', scope.details);
                    });
                }
            });
        }

希望这对你有用＆lt; 3

Answer 3

此代码不起作用

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

因为您无法在弹出窗口中使用函数google.maps.event.addListener

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

3 个答案: