Google 使用 Angular js 放置自动完成功能答案

【问题标题】：Google places autocomplete with angular jsGoogle 使用 Angular js 放置自动完成功能
【发布时间】：2014-08-29 11:27:14
【问题描述】：

我正在尝试使用 Angular js 使谷歌位置自动完成工作。这里是jsfiddle - 'place_change' 事件后模型未更新。它会随着输入的变化而更新。

以下是 html 代码 - HTML

<body ng-app="mapApp">
    <div ng-controller="MapController">
        <input id="from" type="text" ng-model="user.from" placeholder="Type Address" class="ng-pristine ng-valid" autocomplete="off">
        <input type="hidden" ng-model="user.fromLat">
        <input type="hidden" ng-model="user.fromLng">
            <p>{{user.from}} <br> {{'Latitude : ' + user.fromLat + ', Longitutde : ' + user.fromLng}}</p>
    </div>
</body>

Java 脚本

var mapApp = angular.module('mapApp', []);

mapApp.controller('MapController', function ($scope) {
    $scope.user = {'from': '', 'fromLat': '', 'fromLng' : ''};
    var options = {
        componentRestrictions: {country: "in"}
    };
    var inputFrom = document.getElementById('from');
    var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
    google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
        var place = autocompleteFrom.getPlace();
        $scope.user.fromLat = place.geometry.location.lat();
        $scope.user.fromLng = place.geometry.location.lng();
        $scope.user.from = place.formatted_address;
    });
});

【问题讨论】：

您的 jsFiddle 链接似乎不起作用
更新 JsFiddle - jsfiddle.net/punchouty/cTD2a/6
var inputFrom = document.getElementById('from'); 反对控制器最佳实践中的 Angular 无 dom 操作，不是吗？我们如何通过指令来实现这一点？

标签： angularjs google-maps autocomplete

【解决方案1】：

您需要告诉 Angular 何时触发 place_change 事件，以便它知道何时更新 DOM。您可以通过调用$scope.$apply() 来做到这一点。例如：

google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
        var place = autocompleteFrom.getPlace();
        $scope.user.fromLat = place.geometry.location.lat();
        $scope.user.fromLng = place.geometry.location.lng();
        $scope.user.from = place.formatted_address;
        $scope.$apply();
    });

【讨论】：