Open external link from json data file

ionic-v1
1

I can open a link normally like so

<a class="item" href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">
 Open link
</a>

but my url is coming from a json file and loading it doesn’t work

<a class="item" href="#" onclick="window.open({{event.url}}, '_system', 'location=yes'); return false;">
 Open link
</a>

how can I load the url properly?

2

<a class=“item” href="#" onclick=“openUrl(event.ur)”>
Open link
</a>

in controller

$scope,openUrl = function(url) {

window.open(url, ‘_system’, ‘location=yes’); return false);
}

It will work for you

3

Another approach is to use a global handler for the links:

<script>
            document.onclick = function(e) {
                e = e || window.event;
                var element = e.target || e.srcElement;
                var htpattern = /^(http|https):\/\//i;
                if (element.tagName == 'A') {
                    if (htpattern.test(element.href) && !_.startsWith(element.href, "http://localhost")) {
                        window.open(element.href, "_system");
                        return false; // prevent default action and stop event propagation
                    }
                }
            };
        </script>
4 
<script>
            document.onclick = function(e) {
                e = e || window.event;
                var element = e.target || e.srcElement;
                var htpattern = /^(http|https):\/\//i;
                if (element.tagName == 'A') {
                    if (htpattern.test(element.href) && !_.startsWith(element.href, "http://localhost")) {
                        window.open(element.href, "_system");
                        return false; // prevent default action and stop event propagation
                    }
                }
            };
        </script>

so how does this help me create a link with {{event.url}}?

5

how do i add that to my current controller?

define([
  'app',
  'services/event'
], function (app) {
  'use strict';

  app.controller('DetailCtrl', [
    '$scope',
    '$stateParams',
    '$window',
    '$ionicPopup',
    'eventService',
    function ($scope, $stateParams, $window, $ionicPopup, eventService) {
      $scope.loading = true;
      eventService.getOne($stateParams.id).then(function (event) {
        $scope.event = event;
      }).finally(function () {
        $scope.loading = false;
      });

      $scope.reload = function () {
        eventService.getOne($stateParams.id).then(function (event) {
          $scope.event = event;
        }).finally(function () {
          $scope.$broadcast('scroll.refreshComplete');
        });
      };

      $scope.call = function () {
        $window.open('tel:' + $scope.event.contact.tel, '_system');
      };

      $scope.mail = function () {
        $window.open('mailto:' + $scope.event.contact.email, '_system');
      };

      $scope.website = function () {
        $window.open($scope.event.website, '_system');
      };

      $scope.map = function () {
        if (ionic.Platform.isIOS()) {
          $window.open('maps://?q=' + $scope.event.lat + ',' + $scope.event.lng, '_system');
        } else {
          $window.open('geo://0,0?q=' + $scope.event.lat + ',' + $scope.event.lng + '(' + $scope.event.name + '/' + $scope.event.city + ')&z=15', '_system');
        }
      };

      $scope.report = function () {
        $ionicPopup.prompt({
          scope: $scope,
          title: '<span class="energized">Report an issue</span>',
          subTitle: '<span class="stable">What\'s wrong or missing?</span>',
          inputType: 'text',
          inputPlaceholder: ''
        }).then(function (res) {
          if (res) {
            // here connect to backend and send report
          }
        });
      };
    }
  ]);
});
6

this doesn’t work if I add my link like
> >
> > Open link
> >

7

@batman sorry, I understand your question is not quite right. I thougth that you can’t open an external links and my code above help you to do this.

You can try this (quotes added)

<a class="item" href="#" onclick="window.open('{{event.url}}', '_system', 'location=yes'); return false;">
 Open link
</a>

or this

<a class="item" href="#" ng-click="openSite(event.url)"; return false;">
 Open link
</a>

$scope.openSite = function(url) {
    window.open(url, '_system');
    return false;
}

Also check you event.url start with "http://" or "https://".

8

that doesn’t work, the event.url doesn’t load within ng-click

9

Did you check this?

The code above it’s from my working application and should work.
If no, codepen please.