CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
heartmon
heartmon

Reputation: 1421

AngularJS ng-click function not working after $compile map's infowindow content

I have tried to implement dynamic map's (Google Map) Infowindow by $compile the content and set to the infowindow.

I would like the infowindow to show the data depended on the hovered/clicked Marker and user can click some button inside it to invoke the $scope's function.
All data bindings work fine (all value comes) except the $scope's functions, when I click the button there is nothing triggered.

Here is some of my code: 

map.directive.js
///////

function linkFn(scope, element, attrs) {
    scope.mapPane = new MapPane();
    scope.actionButton = function() {
       alert('it should trigger this');
    }

    function MapPane() {
        var self = this;
        self.infoWindow = new google.maps.InfoWindow({..})

        self.openInfoWindow = function() {
            $timeout(function(){
                var content = getContentByMarkerType();
                var el = $compile(content)(scope);
                self.infoWindow.setContent( el );

                self.infoWindow.open( map, latlngObj )
            }
        }
    }
}

For infowindow template, I use ng-bind for data value and ng-click="actionButton()" for invoke function, but nothing happen when click the button.

Did I do something wrong or forget something ?

Thank you.

Upvotes: 0

Views: 574

Answers (1)

tuckerjt07
tuckerjt07

Reputation: 922

Have you tried this $compile pattern?

var compiled = $compile(template);
var elm = complied(scope);
element.append(elm);

This lets your template be fully created and delays the addition of scope values until it is.

Upvotes: 0

Related Questions