代码之家 › 专栏 › 技术社区 › rustyshackleford

使用动态创建的HTML从angularjs控制器调用函数

angularjs html javascript

rustyshackleford · 技术社区 · 6 年前

我用的是 Google Maps API 为API返回的地址创建映射标记列表。我想要 infowindow ng-click 什么都没做。

我试过用 $compile ,但一直没有运气。我的控制器是这样的:

    drivingApp.controller('MapController', ['$resource', '$scope', '$window', '$http', '$compile', function($resource, $scope, $window, $http, $compile) {
    $scope.testPrint = function () {
        console.log('Test')
    };
    $scope.initMap = function () {
        console.log(sessionStorage.getItem('user-token'));
        $http.defaults.headers.common['Authorization'] = 'JWT ' + sessionStorage.getItem('user-token');
        $http.get('my_api_url') // Request currently available properties
            .then(function (response) {
                $scope.allPropertyList = response.data; // Put server response in scope
                var mapCenter = {lat: 29.3568, lng: -98.494738}; // Center the map in the middle of the city

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: mapCenter,
                    zoom: 9
                });

                var marker, i;

                for (i = 0; i < $scope.allPropertyList.length; i++) {
                    // Get latitude and longitude for each property returned by the API
                    var latitude = parseFloat($scope.allPropertyList[i]['property_latitude']);
                    var longitude = parseFloat($scope.allPropertyList[i]['property_longitude']);
                    var property_address = $scope.allPropertyList[i]['property_address'];
                    /*
                    Create content for the info window of the map marker.
                    Allow the user to select properties from the map itself.
                    */

                    var contentString = '<h1 style="font-size: 18px">' + property_address + '</h1>'
                                        +'<div>'
                                        +'<a id="selectFromMapButton" ng-click="testPrint()" class="c-btn" style="color: white">Select Property</a>'
                                        +'</div>';
                    $compile(contentString)($scope);
                    createMarker(i);

                }

                function createMarker(i) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: new google.maps.LatLng(latitude, longitude),
                    });


                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                    });
                }

            });
    };

}]);

我想打电话 testPrint 通过单击地图标记的信息窗口。我怎样才能做到这一点?

1 回复 | 直到 6 年前

MisterMystery 6 年前

让我知道这是否有效。我改变了一些地图逻辑 for 循环并移除 createMarker

for (i = 0; i < $scope.allPropertyList.length; i++) {
    // Get latitude and longitude for each property returned by the API
    var latitude = parseFloat($scope.allPropertyList[i]['property_latitude']);
    var longitude = parseFloat($scope.allPropertyList[i]['property_longitude']);
    var property_address = $scope.allPropertyList[i]['property_address'];
    /*
    Create content for the info window of the map marker.
    Allow the user to select properties from the map itself.
    */

    // Add the marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude , longitude),
        map: $scope.map
    });

    // Build the content string
    var contentString = '<h1 style="font-size: 18px">' + property_address + '</h1>'
                        +'<div>'
                        +'<a id="selectFromMapButton" ng-click="testPrint()" class="c-btn" style="color: white">Select Property</a>'
                        +'</div>';
    // Compile the contentString
    var compiledContent = $compile(contentString)($scope)

    var infowindow = new google.maps.InfoWindow({
        content: ''
    });

    // Add the event listener and open info window.
    google.maps.event.addListener(marker, 'click', (function(marker, contentString, scope, infowindow) {
        return function() {
            infowindow.setContent(contentString);
            infowindow.open(scope.map, marker);
        };
    })(marker, compiledContent[0], $scope, infowindow));
}