Define html with ng-click in controller Angular

Question

i just working with Wikitude and Google maps in AngularJS(Ionic). I need to set ng-click event for InfoWindow in my controller. My code:

google.maps.event.addListenerOnce($scope.map, 'idle', function(){

  var marker = new google.maps.Marker({
      map: $scope.map,
      animation: google.maps.Animation.DROP,
      position: latLng
  });

  var infoWindow = new google.maps.InfoWindow({
      content: '<a href="#" ng-click="launchAR(\'my_world_pls\')">CATCH!</a>'
  });

  google.maps.event.addListener(marker, 'click', function () {
      infoWindow.open($scope.map, marker);
  });

});

Nothing, marker and infowindow is rendered. But link is not active — Jakub Stejskal, Aug 03 '16 at 09:39

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

You cannot link dynamically created HTML directly to controller. There are two options mentioned in this link

Other option is to use jQuery. For this you can give an id to the anchor elementand find the element by ID and attach click event.

edited May 23 '17 at 12:08

Community

1
1

answered Aug 03 '16 at 09:47

Arun Ghosh

7,634
1
26
38

That solution with jQuery sounds good. But how to attach angular event like: $scope.launchAR = function(){}; – Jakub Stejskal Aug 03 '16 at 11:33

score 0 · Answer 2 · answered Aug 03 '16 at 13:17

Solved.

google.maps.event.addListenerOnce($scope.map, 'idle', function() {

    var marker = new google.maps.Marker({
      map: $scope.map,
      animation: google.maps.Animation.DROP,
      position: latLng
    });

    google.maps.event.addListener(marker, 'click', function() {
      $scope.launchAR('mana_catch_and_eat');
    });

  });

Define html with ng-click in controller Angular

2 Answers2