Can I have Angular ng-href bind variables within a string

Question

I'd like to bind a links href property to a variable in my controller but I'd also like to have that url be bound to variables. I'd like to accomplish this using the built in binding and without having to manually watch for changes and reload the url. Is this possible?

// In the controller
$scope.section = 'section1';
$scope.page = 'page1';
$scope.url = 'http://myurl/{{section}}/{{page}}';


<!-- In the template -->
<a ng-href="{{url}}">Page Link</a>

This is a simplification of my actual code. Declaring the url pattern in the template would work but I need to have the url be defined in a string that gets passed in.

tymeJV · Accepted Answer · 2015-01-22 19:15:24Z

7

Just set the ng-href

<a ng-href="http://myurl/{{section}}/{{page}}">Page Link</a>

answered Jan 22, 2015 at 19:15

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

Stephen Marsh Over a year ago

Unfortunately this isn't an option. I need to hold the url in a string variable and can't have it declared in the template. The url is actually coming from a service that returns an array of urls.

tymeJV Over a year ago

@StephenMarsh -- Looks like you'll probably need watchers then.

Bhojendra Rauniyar · Accepted Answer · 2015-01-22 19:14:58Z

2

In the controller, you don't need to use curly braces expressions.

Replace this:

$scope.url = 'http://myurl/{{section}}/{{page}}';

With this:

$scope.url = 'http://myurl/'+$scope.section+'/'+$scope.page;

And to bind it in your template, use:

<a ng-href="http://myurl/{{section}}/{{page}}">Page Link</a>

So, you can now watch for any changes.

answered Jan 22, 2015 at 19:14

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

1 Comment

Souad Over a year ago

Can't bind to 'ng-href' since it isn't a known property of 'a'

Collectives™ on Stack Overflow

Can I have Angular ng-href bind variables within a string

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related