Can't go to external urls using either href or ng-href

Question

I'm trying to have a dynamic URL that takes the user to an external website with AngularJS. However the link takes the user to a route on my page when clicked.

For example, if my url is "mysite.com", and my link is "google.com". If I click on this link, using either href or ng-href, it takes me to a non-existent route on my site: "mysite.com/google.com"

How can I navigate to external URLs?

A sample of my code:

<a href="{{ linkItem.link }}" target="_blank">View file</a>

Whereas linkItem.link is "google.com". This doesn't work as expected for any webpage, even for the ones that have hard coded href attributes.

Answer 1

The problem is caused by not having a protocol (ie. http:// or https://) prefixed in the URL which makes the browser think it's a relative path. There are two ways to fix it:

1. Require the user to input a valid URL with http:// or https:// at the beginning.

2. Create a filter or directive that adds the prefix if it's missing.