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, Aug 18 '15 at 14:14
@jusopi i tried that but it says "page" is not defined in this context — Markus, Aug 18 '15 at 14:29
I had posted that before I saw @charlietfl's comment. It seems that you are trying to have angular render the expression in a file that will later be served by the server? Is this correct? `page` is assumed to be a value on the current `$scope`. If you have Batarang installed, inspect that element and then look for the `page` object to be defined. If it's not there then either you haven't defined `page` for that `$scope` or you're targeting the wrong scope. — jusopi, Aug 18 '15 at 14:40
@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, Aug 18 '15 at 15:11
@charlietfl so what do i have to do yo make this work and not be DRY — Markus, Aug 18 '15 at 17:56
@charlietfl I have no idea how to do that, most of this code was part of a template and i added angular to try and make it easier to maintain — Markus, Aug 18 '15 at 20:46
same way you send all the other data like `place.name`, add property for `url` — charlietfl, Aug 18 '15 at 21:01
@charlietfl I'm a bit confused what youre asking me to do but i tried `{{ page.name }}` replaceing `@Url.Action` with `{{ page.action }}` and im still getting the 404 error. — Markus, Aug 19 '15 at 19:31
you are trying to make it a function inside `ng-href`. Look at the generated html inside the `href` will see it isn't valid. What are you passing to `page.action` from back end? If that is a valid url that is all you should need in the href — charlietfl, Aug 19 '15 at 19:34
@charlietfl well im still doing this throught local host so the url is http://localhost:58893/Dashboards/ReviewAndAdjust. I apologize for having troubles understanding what youre trying to say as i dont know all there is to coding yet — Markus, Aug 19 '15 at 19:50

score 1 · Accepted Answer · answered Aug 27 '15 at 17:43

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>

AngularJS using an expression as an href

1 Answers1