Issues with external links in ionic app on IOS

Question

I have an Ionic app which displays user entered text. In the text some HTML is allowed. example, this is allowed: <a href="http://www.google.com">Go to Google</a>

I am using a WYSIWYG editor for the users to enter the text. https://github.com/fraywing/textAngular

When displayed, I want the link to be opened in the mobile's default browser (Safari on IOS).

to display the text, I am using text-angular's ta-bind directive:

<div ta-bind ng-model="article.contents"></div>

where article.contents has the HTML text (user entered).

While this works fine in Android, In IOS the link opens within the webview and breaks the app.

There are other posts which menation in-app-browser plugin and changing the links to window.open('URL', '_blank') but I am not able to do this.

Note that the text is entered in a different 'Admin' app, which is a web app (Also Angualr app).

How do I resolve this issue ?

Answer 1

I got this resolved by using inapp browser and creating a custom directive instead of using ta-bind.

.directive('customcompile', ['$compile', function ($compile) {
   return function(scope, element, attrs) {
     scope.$watch(
       function(scope) {
         return scope.$eval(attrs.customcompile);
       },
     function(value) {
       element.html(value);
       $compile(element.contents())(scope);
     }
)};
}])

I also had to use one more directive to solve the youtube video issue which was earlier handled by ta-bind.