AngularJS using an expression as an href

Question

My webpage is set up so when a user selects one of many options a number of hyperlinks will appear and take you to that webpage. To make my code less DRY I created an ng-repeat div to output all the options for the user. All the hyperlinks appear on the page properly but the links themselves are broken because the href wont work with an expression in it.

<div style="text-align:center" ng-repeat="page in pages">
    <a href='@Url.Action("{{ page.name }}", "Dashboards")'>{{ page.name }}</a>
</div>

I tried to replace href with ng-href as its supposed to help the expression get processed before the HTML changes the page but that had no effect. Then I removed both curly braces and quotation marks around the expression because you are not supposed to need them when in an expression already. But the code now had an error and because of this it wouldn't run. This is how it looked when each page we created individually:

<a href="@Url.Action("ReviewAndAdjust", "Dashboards")">ReviewAndAdjust</a>
<a href="@Url.Action("Maps", "Dashboards")">Maps</a>

I'm not entirely sure what the @Url bit is but did you try this? ng-href="{{@Url.Action( page.name, 'Dashboards' )}}" — jusopi
– jusopi, Commented Aug 18, 2015 at 14:14
@jusopi i tried that but it says "page" is not defined in this context — Markus
– Markus, Commented Aug 18, 2015 at 14:29
@jusopi you aren't recognizing that @Url.Action() is Razor template code run on server. There is no way for this to evaluate client side using client side variables that don't exist at server run time — charlietfl
– charlietfl, Commented Aug 18, 2015 at 15:11

Markus · Accepted Answer · 2015-08-27 17:43:22Z

1

You cant use server code (Razor) with client code {{ expression }} so you have to to decode the @Url.Action so it can be processed. You have to create a url variable so it will work

@{
  var url = Url.Action("{{ page.name }}", "Dashboards");
  url = url = HttpUtility.UrlDecode(url);
}


<div style="text-align:center" ng-repeat="page in pages">
    <a ng-href="@url">{{ page.name }}</a>
</div>

answered Aug 27, 2015 at 17:43

Markus

2975 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

AngularJS using an expression as an href

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related