獲取自動完成值控制器

我已經在我的觀點如下：獲取自動完成值控制器

<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>

來源

2016-11-23 Julius Knafl

請包括一塊您服務。 – 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>

來源

2016-11-23 23:52:08

它似乎工作正常在你提供的小提琴中。但是我在我的地方得到了這個錯誤：ReferenceError：$ scope沒有被定義（...） –

'$ scope'在'place_changed'事件的上下文中不可訪問，這就是爲什麼你需要傳遞它（與在我提供的例子） –

我用它和你提供的相同的方式，現在它實際上正常工作！但我不明白爲什麼我在控制檯中得到這個錯誤。 –

獲取自動完成值控制器

回答

相關問題