2016-03-01 105 views
4

我正在嘗試使一個具有拾取/丟棄地址的地址框。 Like this one與AngularJs。未捕獲InvalidValueError:initAutocomplete不是一個函數

即時通訊使用Google Autocomplete API所以我可以自動完成,因爲有人開始在地址中輸入內容。

addressBoxView.html:

<form> 
    <div class="form-group"> 
    <label for="exampleInputEmail1">Pickup Address</label> 
    <input type="input" class="form-control" id="autocomplete" placeholder="Enter Address Here" ng-focus="initAutocomplete()"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail1">Dropoff Address</label> 
    <input type="text" class="form-control" id="" placeholder="Enter Address Here"> 
    </div> 
    <button type="submit" class="btn btn-default" id="submit">Submit</button> 
</form> 

addressBoxDirective.js:

angular.module('app.directives.addressBox', []) 
    .directive('addressBox', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
     data: '=' 
     }, 
     templateUrl: 'shared/addressBox/addressboxview.html', 
     controller: function($scope){ 

     $scope.initAutocomplete = function() { 
      // Create the autocomplete object, restricting the search to geographical 
      // location types. 
      autocomplete = new google.maps.places.Autocomplete(
       /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
       {types: ['geocode']}); 

      // When the user selects an address from the dropdown, run the fillinAddress function which will do something 
      autocomplete.addListener('place_changed', fillInAddress); 
     } 

     function fillInAddress(){ 
      console.log(autocomplete); 
     } 
     } 
    }; 
    }); 

首先,我得到這個錯誤時,馬上在頁面運行/負載。

Uncaught InvalidValueError: initAutocomplete is not a function 

然後當我專注於皮卡盒我也得到這個錯誤。

TypeError: Cannot read property 'Autocomplete' of undefined 
    at Scope.$scope.initAutocomplete (http://play.uvgrade.com:9000/shared/addressBox/addressBoxDirective.js:14:48) 
    at fn (eval at <anonymous> (http://play.uvgrade.com:9000/bower_components/angular/angular.js:14086:15), <anonymous>:4:239) 
    at expensiveCheckFn (http://play.uvgrade.com:9000/bower_components/angular/angular.js:15076:18) 
    at callback (http://play.uvgrade.com:9000/bower_components/angular/angular.js:24546:17) 
    at Scope.$eval (http://play.uvgrade.com:9000/bower_components/angular/angular.js:16820:28) 
    at Scope.$apply (http://play.uvgrade.com:9000/bower_components/angular/angular.js:16920:25) 
    at HTMLInputElement.<anonymous> (http://play.uvgrade.com:9000/bower_components/angular/angular.js:24551:23) 
    at HTMLInputElement.jQuery.event.dispatch (http://play.uvgrade.com:9000/bower_components/jquery/dist/jquery.js:4732:27) 
    at HTMLInputElement.elemData.handle (http://play.uvgrade.com:9000/bower_components/jquery/dist/jquery.js:4544:28) 

有時候,突然冒出來,就會開始工作。但它仍然會給我這樣的控制檯上的錯誤:

InvalidValueError: not an instance of HTMLInputElement 

但大多數時候它沒有工作。我不應該用ng-focus調用函數嗎?我試着將initAutocomplete函數放在不同的文件夾中並沒有什麼不同。

讓我知道你是否有任何問題,或者你希望看到更多我的代碼。請不要立即降級,只是要求和不適當的編輯。由於

回答

0

嘗試做的引導,角方式,

$scope.getLocation = function(val) { 
    return $http.get('//maps.googleapis.com/maps/api/geocode/json', { 
     params: { 
     address: val, 
     sensor: false 
     } 
    }).then(function(response){ 
     return response.data.results.map(function(item){ 
     return item.formatted_address; 
     }); 
    }); 
    }; 
相關問題