Calling a function from an angularjs controller using dynamically created HTML

Question

I'm using the Google Maps API to create a list of map markers for addresses returned by my API. I want the infowindow to have a button that calls a function from the controller, but for some reason, ng-click isn't doing anything at all.

I've tried using $compile, but haven't had any luck. Here's what my controller looks like:

    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);
                    });
                }

            });
    };

}]);

I want to call testPrint by clicking on the info window of the map markers. How can I achieve this?

So the info window opens fine, but the button in the info window isn't binding? — MisterMystery
– MisterMystery, Commented Aug 17, 2018 at 15:50
@MisterMystery yes, the that is correct. Give me a moment and I'll show you the $compile line I tried. — rustyshackleford
– rustyshackleford, Commented Aug 17, 2018 at 15:58
@MisterMystery Edited my original post with the $compile line. — rustyshackleford
– rustyshackleford, Commented Aug 17, 2018 at 16:04
That's exactly what I was going to suggest you do ha. I'm sure you could do it using jQuery but I will try and think of another angular way. — MisterMystery
– MisterMystery, Commented Aug 17, 2018 at 16:06

MisterMystery · Accepted Answer · 2018-08-17 17:27:07Z

0

Let me know if this works. I changed some of the map logic in the for loop and removed the createMarker function for simplicity. You should be able to add it back in if you want.

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));
}

edited Aug 17, 2018 at 17:27

answered Aug 17, 2018 at 16:59

MisterMystery

4127 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rustyshackleford Over a year ago

Nope. Uncaught TypeError: Cannot read property 'setContent' of undefined.

MisterMystery Over a year ago

I edited my answer. Note that I added the infowindow var back in and changed the event listener params

rustyshackleford Over a year ago

Now the markers don't show up, but I don't have an error in the console.

MisterMystery Over a year ago

Try changing var map = new google.maps.Map to $scope.map = new google.maps.Map

rustyshackleford Over a year ago

That's what I did, and the markers do show up. However, testPrint is still not being called when I click on the button.

|

Collectives™ on Stack Overflow

Calling a function from an angularjs controller using dynamically created HTML

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related