未捕获的无效值错误:initAutocomplete 不是一个函数

Question

我正在尝试制作一个包含接送地址的地址框。就像这个与AngularJs。

我使用 Google 自动完成 API，因此我可以在有人开始输入地址时自动完成。

地址框视图.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;
      });
    });
  };