Question

我认为我有以下内容：

<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">

我正在使用google maps api来自动填充输入框，所以如果用户开始输入＆＃34; Lo＆＃34;，他将获得一个以＆＃34; Lo＆＃34;开头的地方列表。例如，他选择了伦敦。

问题在于我的控制器我没有得到整个自动完成的值。我只得到用户最初输入的内容，在这种情况下＆＃34; Lo＆＃34;。

这是我的控制器：

app.controller('BookingsCtrl', function($scope, BookingsService) {
  $scope.pickup = "";
  $scope.destination = "";
  $scope.syncNotification = "";

  $scope.calcPrice = function() {
    console.log($scope.pickup);

    BookingsService.save({
      pickup: $scope.pickup,
      destination: $scope.destination
    }, function(response) {
      console.log(response.message);
    });
  };
});

编辑：这里也是JS的片段：

var pickup = document.getElementById('pickup');

var options = {
    componentRestrictions: {
        country: 'ee'
    }
};

var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);

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

    var place = autocompletePickup.getPlace();
    pickup.innerHtml =  place.formatted_address;
    var lat = place.geometry.location.lat();
    var long = place.geometry.location.lng();

});

编辑2：添加服务

app.service('BookingsService', function ($resource) {
  return $resource('http://localhost:3000/', {});
});

编辑3：模板

<!doctype html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt1Y30OssBToIzSCOr3g5IkN3c0D75XVE&libraries=places"
     ></script>
</head>
<body ng-app='strelsau_client'>
  <div class="site-wrapper">
     <div class="site-wrapper-inner">
        <div class="cover-container">
           <div class="masthead clearfix">
              <div class="inner">
                 <img class="masthead-brand" src="../assets/img/logo.png">
                 <nav>
                    <ul class="nav masthead-nav">
                       <li class="active"><a href="#">Home</a></li>
                       <li><a href="#">Contact</a></li>
                    </ul>
                 </nav>
              </div>
           </div>
           <div ng-view>
           </div>
        </div>
     </div>
  </div>
  <script src="components/jquery/dist/jquery.min.js"></script>
  <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="components/angular/angular.min.js"></script>
  <script src="components/angular-route/angular-route.min.js"></script>
  <script src="components/angular-resource/angular-resource.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/controllers/bookings_controllers.js"></script>
  <script src="js/services/bookings_service.js"></script>
</body>
</html>

Answer 1

事实上pickup输入元素一旦解决了地点就不会得到更新。

此功能的问题：

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

    var place = autocompletePickup.getPlace();
    pickup.innerHtml =  place.formatted_address; //invalid
    //...
});

对于设置输入字段值，应使用value属性。

无论如何，在给出示例的情况下，尝试将其替换为：

(function (scope) {
            google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
                var place = autocompletePickup.getPlace();
                scope.pickup = place.formatted_address;
            });
        })($scope);

示例

angular.module('myApp', []) .controller('BookingsCtrl', function ($scope) { $scope.pickup = ""; $scope.destination = ""; $scope.syncNotification = ""; var pickup = document.getElementById('pickup'); var options = { componentRestrictions: { country: 'ee' } }; var autocompletePickup = new google.maps.places.Autocomplete(pickup, options); (function (scope) { google.maps.event.addListener(autocompletePickup, 'place_changed', function () { var place = autocompletePickup.getPlace(); scope.pickup = place.formatted_address; }); })($scope); $scope.calcPrice = function () { console.log($scope.pickup); alert($scope.pickup); /*BookingsService.save({ pickup: $scope.pickup, destination: $scope.destination }, function (response) { console.log(response.message); });*/ }; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div ng-app="myApp" ng-controller="BookingsCtrl" ng-cloak> <label for="txtFrom">Pickup Location</label> <input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup"> <label for="txtDestination">Destination</label> <input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination"> <input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()"> </div>

从控制器中的输入获取自动完成值

1 个答案: