Ionic rendering inside ion-content when using window.open

I am having what I think may be a syntax problem when I try to use an onclick event. I have a page that renders the following correctly:

 <ion-view>
    <ion-content>
       <a href="geo:{{latitude}},{{longitude}}?z=11">
                View Map
       </a>
    </ion-content>
 </ion-view>

Now what I am trying to do here is to change the above with this:

<ion-view>
    <ion-content>
            <a onclick="window.open('geo:{{latitude}},{{longitude}}?z=11&q={{latitude}},{{longitude}}(Treasure)', '_system', 'location=yes');" href="geo:{{latitude}},{{longitude}}?z=11&q={{latitude}},{{longitude}}(Treasure)">View Map</a>
    </ion-content>
 </ion-view>

The problem is that the variables inside window.open (e.g. {{latitude}}, etc…) are not rendered and I still see the {{latitude}} etc… instead of the real values.

I know as a fact that the link is correct. If I hard code the values as the sample below, the link works just fine and I can be able to open an external Google Maps call from my app:

<ion-view>
    <ion-content>
            <a onclick="window.open('geo:0,0?z=11&q=0,0(Treasure)', '_system', 'location=yes');" href="geo:0,0?z=11&q=0,0(Treasure)">View Map</a>
    </ion-content>
 </ion-view>

I use 0,0 here only as a sample, on my app I use real coordinates. Any ideas would be gladly appreciate it, thanks a lot.

did you try this?

<ion-view>
    <ion-content>
            <a ng-click="openGeo(latitude, longitude)" ng-href="geo:{{latitude}},{{longitude}}?z=11&q={{latitude}},{{longitude}}(Treasure)">View Map</a>
    </ion-content>
 </ion-view>

$scope.openGeo = function(latitude, longitude) {
    $window.open('geo:' + latitude + ',' + longitude + '?z=11&q=' + latitude + ',' + longitude + '(Treasure)', '_system', 'location=yes');
}
2 Likes

PERFECT! Thank you so much southlink. To be honest with you, thanks to you I figured out the problem I was originally having. Let me explain you, hopefully it may help someone else, my goal was to be able to open an external map program from my app. I read that this was possible to do by adding geo in an href, something like href=“geo:0,0”… and by giving access in the config.xml to geo, e.g.
I did this but didn’t work . I tried with tel and with tel did work, e.g. href=“tel:222222222”, I was able to click on a link in my app and open an external program to make a call. This is why I tried to find an alternative solution to get the geo thing working, in this case the onclick. Thanks to you I have been able to see why geo was not actually working when I was adding your suggestion. Basically I was able to see a prefix (unsafe) added to geo call, e.g. href=“unsafe:geo:0,0”. I needed to explicitly add URL protocols to Angular’s whitelist using a regular expression to bypass this problem. Something like this on my angular module .config:

$compileProvider.aHrefSanitizationWhitelist(/^\s*(http?|https?|ftp|mailto|geo|blob|file|chrome-extension):/);

Ironically now both options work :smile: . Anyway, thanks again!

Glad to know I helped you :slight_smile:

1 Like