ui-sref does not produce correct href with parameter

Question

I'm trying to use ui-router to change state and pass a GUID parameter to my controller. I have this working using Kendo (different syntax) so I know what I'm aiming for. I cannot for the life of me figure out what the deal is. I have searched far and wide and I believe that I have the correct syntax for the ui-sref. Here it is:

<a ui-sref="clientEdit({ clientId: '{{vm.clientModel.id}}' })">Edit Link</a>

Produces this output in the rendered view (notice missing id):

<a ui-sref="clientEdit({ clientId: 'bfd50b6c-6542-48c5-adf7-8c1a21caf421' })" href="#/clientEdit/">Edit Link</a>

Here is my state:

.state("clientEdit", {
  url: "/clientEdit/:clientId",
  templateUrl: "/CompanyDashboard/ClientsCrud",
  controller: "DashboardClientsCtl",
  controllerAs: "vm"
})

When I hardcode the ID into the ui-sref it works as expected and produces the correct href for the tag. Like this:

<a ui-sref="clientEdit({clientId:'bfd50b6c-6542-48c5-adf7-8c1a21caf421'})">Hard code Edit Link</a>

The hard-coded ID tag produces this output in the rendered view (exactly as I would expect):

<a ui-sref="clientEdit({clientId:'bfd50b6c-6542-48c5-adf7-8c1a21caf421'})" href="#/clientEdit/bfd50b6c-6542-48c5-adf7-8c1a21caf421">Hard code Edit Link</a>

So, my question is: Am I missing something here? I really believe this should work as I'm already doing this successfully using a Kendo template for a different route.

Just in case you care, here is the working kendo template code:

template: "<a ui-sref='clientDetails({clientId:\"#=id#\"})'>#=customerNumber#</a>"

I have tried changing quotes to double as in the Kendo example, removing the quotes, removing the {{ }} from the Id expression. No Joy.

Thanks for any and all help.

Radim Köhler Radim Köhler · Accepted Answer · 2015-03-11T13:58:56

Solution here is to NOT wrap the param with {{}}

// instead of this
<a ui-sref="clientEdit({ clientId: '{{vm.clientModel.id}}' })">Edit Link</a>
// use this
<a ui-sref="clientEdit({ clientId: vm.clientModel.id})">Edit Link</a>

The content of a vm.clientModel.id is already a string, and will be correctly passed as string (it is GUID for JS it is string)

ui-sref does not produce correct href with parameter

2 Answers