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

Answer 1

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'".

  {{::ticker.tick.name}} News from Yahoo! Finance

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.