angularjsgoogle-mapsng-map

How to click a button inside an info window with ngMap and AngularJS

I used ngMap with AngularJS to display marker and info window. The info window is used with customized template and HTML. However, when I used a button and click event inside the info window, it didn't work. I tried $compile and addListener but it failed to work too.

var infoTemplate = `<button class="btn btn-success" ng-click="$ctrl.myFunction();">Add</button>`
this.markerCustomTemplate = $sce.trustAsHtml(marker.infoTemplate);

<info-window id="marker-info-custom-template">
    <div ng-non-bindable="">
        <span ng-bind-html="$ctrl.markerCustomTemplate"></span>
    </div>
</info-window>

Sample code: https://plnkr.co/edit/mBeJb7EErrkts6Fq?preview

Solution

  • You should use ng-bind-compile instead of ng-bind-html.

    Don't forget to include angular-bind-compile.min.js in your project.

    <span ng-bind-compile="$ctrl.markerCustomTemplate"></span>