我试图让谷歌的地方自动完成工作与角js.这是
jsfiddle –
在’place_change’事件之后,模型没有得到更新.它正在更新输入的更新.
在’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;
});
});
解决方法
当place_change事件被触发时,您需要告诉angular,因此它知道何时更新DOM.你可以通过调用$scope.$apply()来做到这一点.例如.：
google.maps.event.addListener(autocompleteFrom,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();
});
