获取自动完成值控制器

问题描述：

<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()">

我使用谷歌地图API的地方自动完成输入框，因此，如果用户开始输入“LO” ，他会得到一个以“Lo”开头的地方，例如他选择伦敦。

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

这里是我的控制器：

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>

请包括一块您服务。 – alphapilgrim

@alphapilgrim更新后包含服务 –

请求成功激发？ – alphapilgrim

答

事实上，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>

它似乎工作正常在你提供的小提琴中。但是我在我的地方得到了这个错误：ReferenceError：$ scope没有被定义（...） –

'$ scope'在'place_changed'事件的上下文中不可访问，这就是为什么你需要传递它（与在我提供的例子） –

我用它和你提供的相同的方式，现在它实际上正常工作！但我不明白为什么我在控制台中得到这个错误。 –

获取自动完成值控制器

相关推荐