Dynamic links in Ionic, with inAppBrowser

Question

I’m developing an app with Ionic, which consumes an external API (json). To make links that open in the native browser, I added the inAppBrowser plugin and it worked.

The point is that some links are dynamic, built with API variables, in the "url" and "id" case, as follows:

<button id="encontrar-button1" class="button button-balanced  button-block icon-left ion-plus-circled" onclick="window.open('http://www.site.com/pagina/{{ url }}/{{ id }}/', '_system', 'location=yes'); return false;">Link</button>

It doesn’t work... it seems to me that Angular discards variables. How to solve?

Answer 1

First of all you cannot use onClick directives in this case, otherwise the variables will not be translated by angular. And another, don’t use the window object directly in your links. Create a method in your controller for this.

For example, leave it in your html:

<button id="encontrar-button1" ng-click="openURL('http://www.site.com/pagina/{{ url }}/{{ id }}/')" class="button button-balanced  button-block icon-left ion-plus-circled">Link</button>

And in the respective controller create a method like this:

$scope.openURL = function(url){
    window.open(url, '_system', 'location=yes');
}