Binding external URL in angularjs template

Question

I have a angularjs app with a controller and a partial wired up..

In my controller I have a array of links..

$scope.links = ['http://www.example.com/1','http://www.example.com/2'];

In my partial, I have the following code..

 <div ng-repeat="link in links">
 <a href="{{link}}" target="_blank">Link</a>
 </div>

This does not seem to work.. I am running this via a NodeJS app locally..and so my URLs always end up as http://dev-server.local:3000/"http://www.example.com"

Can anyone please help me figure out how I can add a hyperlink from my controller directly into my partial template and make Angular not append the page URL..

did you use the `` tag? – Chen-Tsu Lin Feb 13 '14 at 12:02 — Chen-Tsu Lin, Feb 13 '14 at 12:02
I am not sure of the usage of tag.. can you please assist.. – Sharath Feb 13 '14 at 14:22 — Sharath, Feb 13 '14 at 14:22

score 6 · Answer 1 · answered Feb 13 '14 at 15:04

You have to explicitly trust extern URL:s. Look at the documentation for $sce.

In you controller, make sure you have a dependency to $sce, then in create a method that trust the external url.

$scope.trustUrl = function(url) {
    return $sce.trustAsResourceUrl(url);
}

In your view you can reference this method and pass in the url with

<a ng-href="{{ trustUrl(item) }}">Click me!</a>

score 4 · Accepted Answer · answered Feb 13 '14 at 14:49

4

instead of

href={{link}}

use

ng-href={{link}}

answered Feb 13 '14 at 14:49

Aleksandar Gajic

1,349
1
18
23

This is correct.. but there was a problem in my JSON parsing as well.. and that was also the reason it was failing.. – Sharath Feb 14 '14 at 04:45

Binding external URL in angularjs template

2 Answers2

Linked