Question

我正在尝试创建一个简单的角度指令，添加谷歌地图将搜索框放置到输入。见this example on Google Developers。我甚至不需要地图，只需要搜索框。

指令成功运行（搜索框对象的控制台打印成功），但运行后控制台出错，输入无效。控制台中的错误是Uncaught TypeError: undefined is not a function。

可以肯定的是，我正在使用另一个指令，它使用jquery-ui初始化日期选择器。这似乎工作正常。

HTML：

<html ng-app="events">      
    <body>
        <h1>Hello Plunker!</h1>
        Date:
        <input type="text" datetime-input="format" />
        <br>
        Location:
        <input type="text" location-input="format" />
    </body>
</html>

JS：

var events = angular.module('events', []);

events.directive('locationInput', function() {
    function link(scope, element, attrs) {
        scope.searchBox = new google.maps.places.SearchBox(element);
        console.log(scope.searchBox);
    }

    return {
        link: link
    };
});

events.directive('datetimeInput', function() {
    function link(scope, element, attrs) {
        $(element).datepicker();
    }

    return {
        link: link
    };
});

请参阅the Plunkr I've created。

为什么会出错？我做错了什么？

Answer 1

问题是元素没有采用适当的回调格式，您必须执行element[0]。之后，您将需要附加一个监听器。您的代码将如下所示：

scope.searchBox = new google.maps.places.SearchBox(element[0]);
google.maps.event.addListener(scope.searchBox,'places_changed',function(){
    var places = searchBox.getPlaces();
    for(var i =0, place;place=places[i];i++){
        console.log(place.icon+':'+place.name+':'+ place.geometry.location);
    }
})

在角度指令中，谷歌地图API出错

1 个答案: