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

Question

我正在使用Google Maps API为API返回的地址创建地图标记列表。 我希望信息窗口具有一个从控制器调用函数的按钮，但是由于某些原因， 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 。 我该如何实现？

Answer 1

让我知道这个是否奏效。 为了简单起见，我更改了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));
}