javascript - 未捕获的 InvalidValueError : initAutocomplete is not a function

我正在尝试制作一个带有接送地址的地址框。 Like this one 与 AngularJs。

我使用 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 函数放在不同的文件夹中并没有什么区别。

如果您有任何问题，或者您想查看我的更多代码，请告诉我。请不要立即降级，只是询问和编辑。谢谢

最佳答案

尝试 Bootstrap-Angular 的做法，

$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;
      });
    });
  };

关于javascript - 未捕获的 InvalidValueError : initAutocomplete is not a function，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35714284/