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

Question

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.

is MapPane supposed to be a function inside linkFn? Because linkFn has no closing }, neither after nor before MapPane. — Jan
– Jan, Commented Jul 4, 2015 at 21:26
I missed one { in my post but actually it is there after MapPane (I will edit). — heartmon
– heartmon, Commented Jul 5, 2015 at 1:52

tuckerjt07 · Accepted Answer · 2015-07-05 07:48:29Z

0

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.

answered Jul 5, 2015 at 7:48

tuckerjt07

9221 gold badge13 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related