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

I am not sure of the usage of <base> tag.. can you please assist.. — Sharath
– Sharath, Commented Feb 13, 2014 at 14:22

Johan Nordberg · Accepted Answer · 2014-02-13 15:04:19Z

6

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>

answered Feb 13, 2014 at 15:04

Johan Nordberg

3,7774 gold badges37 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aleksandar Gajic · Accepted Answer · 2014-02-13 14:49:45Z

4

instead of

href={{link}}

use

ng-href={{link}}

answered Feb 13, 2014 at 14:49

Aleksandar Gajic

1,3591 gold badge18 silver badges23 bronze badges

1 Comment

Sharath Over a year ago

This is correct.. but there was a problem in my JSON parsing as well.. and that was also the reason it was failing..

Collectives™ on Stack Overflow

Binding external URL in angularjs template

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related