Google размещает автозаполнение с помощью angular js

Я пытаюсь заставить автозаполнение мест Google работать с 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;
    });
});

google-maps autocomplete angularjs
person Puja    schedule 08.07.2014    source источник
comment
ваша ссылка jsFiddle, похоже, не работает   -  person rob    schedule 08.07.2014
comment
Обновления JsFiddle — jsfiddle.net/punchouty/cTD2a/6   -  person Puja    schedule 09.07.2014
comment
var inputFrom = document.getElementById('from'); против того, чтобы Angular не манипулировал домом из лучших практик контроллеров, не так ли? Как мы можем добиться этого с помощью директивы?   -  person sgimeno    schedule 13.01.2015

Ответы (1)


arrow_upward
5
arrow_downward

Вам нужно сообщить 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();
    });
person rob    schedule 08.07.2014