How to use ng-href with absolute url?

Question

I'm still new to angularjs, and I have a problem that I seem to not be able to find solution, and I don't have time to go look into angular source.

This is my scenario:

I have some json data with collection of urls that I want to show on screen. I have an element with ng-repeat="link in links" and inside I have

<a ng-href="{{link.url}}">{{link.title}}</a>

That works, but all links are pointing to mydomain/apppath/valueoflink.title I want them to be absolute, only valueoflink.title without any prefix.

How to tell angular that it is absolute not relative url?

score 18 · Answer 1 · edited Jan 19 '21 at 22:13

18

As Goran said, his solution will work only if all urls are like 'www.google.com'.

If you have a combination of different types of the urls, e.x. 'www.google.com', 'https://github.com', 'http://goo.gl', 'github.com', you can use ng-href with an angular filter:

<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>

and a filter, which will append 'http://' to your url, if it starts with 'www':

'use strict';
myApp.filter("myFilter", function () {
    return function (link) {
        var result;
        var startingUrl = "http://";
        var httpsStartingUrl = "https://"; 
        if (link.startWith(startingUrl) || link.startWith(httpsStartingUrl)) {
            result = link;
        }
        else {
            result = startingUrl + link;
        }
        return result;
    }
});
String.prototype.startWith = function (str) {
    return this.indexOf(str) == 0;
};

edited Jan 19 '21 at 22:13

GMachado

791
10
24

answered Dec 18 '14 at 12:00

Tonven

608
9
27

Your solution looks like with issue. 'github.com' - you return 'github.com' – Mediator Oct 07 '15 at 07:26
@Mediator I changed script, so it will now always append "http" prefix to a link. Can you try it now? – Tonven Oct 07 '15 at 08:18
1

I didn't try, I just reviewed. So now it looks nice. – Mediator Oct 07 '15 at 08:23
For anyone running into interpolation errors, make sure `link` is defined before calling `startWith()` on it. – Troy Carlson Jul 20 '16 at 12:16

score 14 · Accepted Answer · answered Feb 07 '14 at 09:42

I solved it by prefixing data in json with 'http://' to make them trully absolute urls, and angularjs respects that.

Then I understood that angular is actually not doing anything with value, it is just putting it there as it is, and it is my fault to see that.

updating code to this solves problem when all urls are like 'www.google.com'

<a ng-href="http://{{link.url}}">{{link.title}}</a>

Plain old 'inspect element' uncovered issue, and I ignored the fact that ng-href binds from {{value}} syntax, so this is why my first attempt to put ng-href="'http://'+{{value}}" failed and led me to ask question prematurely, but I'm not sure if I should delete it as I may not be only one making such mistake.

Daniel C. Deng · Answer 3 · 2016-09-17T21:10:02.750

For just using an external URL, filter is too complex. The following is a snippet used at my web site, youtiming.com, for accessing Yahoo! Finance News on a ticker such as AMZN stored in ticker.tick.name. "ticker" is the loop variable from ng-repeat, "ng-repeat='ticker in portf.tickers'".

<div ng-if="ticker.tick.name">
  <a href="http://finance.yahoo.com/quote/{{::ticker.tick.name}}/news?p={{::ticker.tick.name}}">{{::ticker.tick.name}} News from Yahoo! Finance</a>
</div>

According to the ng-href doc (https://docs.angularjs.org/api/ng/directive/ngHref), the reason to use ng-href is "Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value.", so in order to stop the side-effect while turning off the 2-way data-binding by "::" for performance reason, you firstly ng-if whether ticker.tick.name is available: If yes, construct the URL; otherwise, the code will hold until it becomes available.

If it takes noticeable time for ticker.tick.name becoming available, you should check your RESTful service call lag or network traffic rather than trying to provide complex solution(s) from the front-end.

How to use ng-href with absolute url?

3 Answers3

Linked