Goran Obradovic Goran Obradovic - 1 year ago 218
AngularJS Question

How to use ng-href with absolute url?

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download