如何为google location创建angularjs自定义指令

我正在尝试创建一个指令来使用

查找google位置，如下所示：

angular.module('MyApp').directive('locationPicker', function () {

    return {
        restrict: 'AE',
        replace: true,
        require: 'ngModel',
        template: '<input id="{{id}}" type="text" class="{{class}}" placeholder="{{placeholder}}" />',
        scope: {
            id: '@',
            class: '@',
            placeholder: '@',
        },
        link: function ($scope, elm, attrs, controller) {

            var autocomplete = new google.maps.places.Autocomplete(elm[0], {types: ['geocode']});

            var componentForm = {
                locality: 'long_name',
                administrative_area_level_1: 'short_name',
                country: 'long_name'
            };

            google.maps.event.addListener(autocomplete, 'place_changed', function () {

                var place = autocomplete.getPlace();
                var lat = place.geometry.location.lat();
                var lng = place.geometry.location.lng();

                var name = "";

                for (var i = 0; i < place.address_components.length; i++) {
                    var addressType = place.address_components[i].types[0];
                    if (componentForm[addressType]) {
                        if (name !== "") {
                            name += ", ";
                        }

                        var val = place.address_components[i][componentForm[addressType]];
                        name += val;
                    }
                }

                elm[0].value = name;
                $scope.$apply(function () {
                    controller.$setViewValue({name: name, lat: lat, lng: lng});
                });
            });
        }
    };
});

一切看起来都很好，但当我的组件第一次渲染时，输入的值是[Object Object]，而不是占位符（项目位置）

我做错了什么？

问题 您正在将

ngModel

绑定到location对象，当强制为字符串时，location对象呈现为

[object object]

解决方案 由于您在指令中抓住了

NgModelController

，因此可以使用其管道转换模型值（具有

名称

，

lat

，

lng

属性的位置对象）进入视图值和函数，指定在

ngModel

生命周期之外更改值时如何呈现该值

这是一个正在工作的plunker:。关键的代码是

// triggered by $setViewValue
controller.$formatters.push(function (value) {
    return value ? value.name : value;
});

// triggered by clear() from controller
controller.$render = function () {
    input.value = controller.$modelValue.name;
};

我还对您的代码进行了以下修改：

使用

位置选择器

作为元素指令

input

不是一个好的元素选择，因为它已经绑定到

ngModel

已删除

替换：true

。它是指令中不推荐使用的配置选项，可能会导致一些奇怪的行为，因为它试图混合指令元素的属性和模板元素的属性

已删除

elm[0]。值=名称。当您调用
$setViewValue
时，这由
ngModel
的生命周期处理

---

是的，因为您的型号名称是

location

，并且它是控制器中的一个对象。您可以尝试

location.name

而不是

location

，但是使用对象的全部目的是在选择位置时能够获取lat和lng。感谢您的帮助！我只做了一个小小的更改，它就像一个符咒：元素[0]。removeAttribute（'class'）；&元素[0]。removeAttribute（'id'）；

$scope.location = {
   name:null,
   lat:null,
   lng:null
};

// triggered by $setViewValue
controller.$formatters.push(function (value) {
    return value ? value.name : value;
});

// triggered by clear() from controller
controller.$render = function () {
    input.value = controller.$modelValue.name;
};