Search code examples
javascriptangularjsionic-frameworkopenlayersapache-cordova

Link in Angular Openlayers Directive marker message not working

I made a simple mobile application using angular openlayers directive, i have my map and the markers i need, but in the html shown whithin the marker's message there is a link which takes you to another page, which is not working.

Is there a problem with the Angular Openlayers directive?, or am i doing something wrong?

It may have something to do with the fact that i'm making a ionic app in Apache Cordova for Visual Studio 2015?, i would show the code but it's almost exactly as the example i show here, the thing is, the links i put in the popup windows don't do anything on click.

Edit (again): Ok so now i have some example to show, i based it on this one http://embed.plnkr.co/oHzLdlUNiEnHZKYA6qdK/, and shows exactly the problem i'm having with the links inside the marker's windows, basically the link doesn't work, here it is: http://codepen.io/Orion390/pen/rrrQxm

$scope.markers.push({
  lat: Math.random() * 90 - 40,
  lon: Math.random() * 180 - 90,
  //message: $scope.markers.length +1
  message: "<a href='http://stackoverflow.com/' target='_self'> Lets post the question!! </a>"
});

Puts a marker with a link inside it's infowindow that does nothing on click

Update: This one actually works http://codepen.io/Orion390/pen/RGGZOE, i joust added a marker in the ng-init, like:

<body ng-controller="MainCtrl" ng-init="addMarker()" >

Not really solving the problem, markers added after that still not working, but may have something to do with the marker windows being rendered behind a layer that does not let it get the click event?

Solution

  • So here is your fix:

    <ol-marker ng-repeat="marker in markers" ng-click="go()" ol-marker-properties="marker" >
  <a  data-tap-disabled='true' href='http://stackoverflow.com/' target='_self'> Lets post the question!! </a>
</ol-marker>

    So you need to add data-tap-disabled='true' so your code. But unfortunately this will get stripped out during bind-html. So you are going to need to either disable the sce restrictions or use transclude and include the html you want inside of the ol-marker. the other option is you put it up higher in the change on your <openlayers> maybe.

    Ionic documentation on tap

    Let me know if you need an updated codepen.

    The code that broke it in ionic was:

      function tapClickGateKeeper(e) {
    //console.log('click ' + Date.now() + ' isIonicTap: ' + (e.isIonicTap ? true : false));
    if (e.target.type == 'submit' && e.detail === 0) {
      // do not prevent click if it came from an "Enter" or "Go" keypress submit
      return null;
    }

    // do not allow through any click events that were not created by ionic.tap
    if ((ionic.scroll.isScrolling && ionic.tap.containsOrIsTextInput(e.target)) ||
        (!e.isIonicTap && !ionic.tap.requiresNativeClick(e.target))) {
      //console.log('clickPrevent', e.target.tagName);
      e.stopPropagation();

      if (!ionic.tap.isLabelWithTextInput(e.target)) {
        // labels clicks from native should not preventDefault othersize keyboard will not show on input focus
        e.preventDefault();
      }
      return false;
    }
  }