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

Question

我正在尝试制作一个地址框，其中包含上车/下车地址。 Like this one使用 AngularJs。

我正在使用 Google Autocomplete API所以我可以在有人开始输入地址时自动完成。

地址框 View .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>

地址框指令.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 函数放在不同的文件夹中并没有什么不同。

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

Answer 1

尝试使用 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;
      });
    });
  };