未捕获的无效值错误:initAutocomplete 不是一个函数
Uncaught InvalidValueError: initAutocomplete is not a function
我正在尝试制作一个包含接送地址的地址框。就像这个与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 函数放在不同的文件夹中并没有产生任何影响。
如果您有任何问题,或者您想查看更多我的代码,请告诉我。请不要立即降级,只是询问并生病编辑。谢谢
尝试 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函数打开一个新的弹出窗口
- 我可以在json对象中添加一个函数吗
- Javascript使函数一个接一个地执行
- 是JavaScript中的函数一个对象
- 两个几乎相等的jQuery函数;一个适用于IE,一个不适用于IE
- 两个Javascript函数一个window.onload=Custom.init;和一个window.onload=f
- 使javascript加载函数一个接一个地执行
- 如何通过两个嵌套的匿名函数(一个带有超时的事件处理程序)传递变量
- 为什么我不能让两个jQuery函数一个在另一个里面呢?
- 给函数一个变量名,而不是它的值
- 如何使用嵌入函数(一个滚动页由Pete - peachananr)
- 是否有可能给JavaScript函数一个类型/类?
- 确保两个函数一个接一个地执行,其中第一个函数内部有一个异步调用
- 两个不同的ajax函数一个接一个调用返回相同的值
- jQuery第一次更改函数一个工作
- 给这个函数一个id
- 如何给回调函数一个值一个变量在特定时刻
- 使用回调使两个函数一个接一个地运行
- 两个函数(一个用php)是否可以用“;onclick”;
- 两个几乎相同的函数.一个函数用Queue进行排队.Jquery效果在queued函数上不起作用.为什么