Skip to content

Instantly share code, notes, and snippets.

@rewonc
Last active October 26, 2021 00:16
Show Gist options
  • Save rewonc/e53ad3a9d6ca704d402e to your computer and use it in GitHub Desktop.
Save rewonc/e53ad3a9d6ca704d402e to your computer and use it in GitHub Desktop.
AngularJS/PhoneGap/Ionic: filter to convert links for opening in separate mobile window
//*
//* See the JS Fiddle: http://jsfiddle.net/sxcjmoj5/3/
//*
//*
// make sure ngSanitize module is installed:
// https://docs.angularjs.org/api/ngSanitize
//
// To convert links from plaintext, you must use the linky filter which is included with ngSanitize
// https://docs.angularjs.org/api/ngSanitize/filter/linky
//
// You might need to install inappbrowser if you haven't done that:
// https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index.md
//
// In your app.js
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.filter('hrefToJS', function ($sce, $sanitize) {
return function (text) {
var regex = /href="([\S]+)"/g;
var newString = $sanitize(text).replace(regex, "onClick=\"window.open('$1', '_blank', 'location=yes')\"");
return $sce.trustAsHtml(newString);
}
});
myApp.controller('MyCtrl', function ($scope) {
$scope.html = "This a link: <a href='https://www.google.com'>Google</a> :)";
$scope.plaintext = "This is a link: https://www.google.com :) "
});
///Usage in your HTML template
/*
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<h1>Before</h1>
<p ng-bind-html="html"></p>
<p ng-bind-html="plaintext"></p>
<h1>After</h1>
<p ng-bind-html="html | hrefToJS"></p>
<p ng-bind-html="plaintext | linky | hrefToJS"></p>
</div>
</div>
*/
@lucaslimasouza
Copy link

Thanks. Good works.

@renanss
Copy link

renanss commented Jun 3, 2016

Thank you.

@brunosserrao
Copy link

It's saved my life.Thank you so much.

@adyba
Copy link

adyba commented Jun 29, 2016

Even the "naked" ngSanitize offers something like this https://code.angularjs.org/1.4.12/docs/api/ngSanitize/filter/linky
Once you need something more advanced (hashtags, mentions) take a look at https://github.com/scottcorgan/angular-linkify

@analistacarlosh
Copy link

Thaks.

@J261
Copy link

J261 commented Oct 15, 2016

perfect

@tkserver
Copy link

I've got this working on android after building an angular 1.5 app through ionic/cordova build. But on iOS the outgoing link does not open safari. It goes to the app's home page, which I'm assuming is the "otherwise" part of the routes kicking in. I've got inappbrowser installed. Perhaps that's not configured correctly?

@pbnelson
Copy link

Thanks for this! My Ionic1 app doesn't open links in the browser (webview) mode when target=_blank, instead it requires target=_system. I adapted the code slightly and now it works for me in both browser mode and iOS. If you're having the same problem, try this:

        var newString = $sanitize(text).replace(regex, "href onClick=\"window.open('$1', '" + (ionic.Platform.isWebView()) ? '_system' : '_blank' + "', 'location=yes');return false;\"");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment