ui-sref не выдает правильный href с параметром

Question

Я пытаюсь использовать ui-router, чтобы изменить состояние и передать параметр GUID моему контроллеру. У меня это работает с использованием кендо (другой синтаксис), поэтому я знаю, к чему я стремлюсь. Я не могу на всю жизнь понять, что это за сделка. Я искал повсюду и считаю, что у меня правильный синтаксис для ui-sref. Вот:

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

Создает этот вывод в визуализированном виде (обратите внимание на отсутствующий идентификатор):

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

Вот мое состояние:

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

Когда я жестко закодировал идентификатор в ui-sref, он работает как положено и выдает правильный href для тега. Как это:

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

Жестко закодированный тег ID производит этот вывод в визуализированном виде (именно так, как я и ожидал):

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

Итак, мой вопрос: я что-то здесь упускаю? Я действительно считаю, что это должно работать, поскольку я уже делаю это успешно, используя шаблон Kendo для другого маршрута.

На всякий случай вот рабочий код шаблона кендо:

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

Я попытался изменить двойные кавычки, как в примере с кендо, удалив кавычки, удалив {{ }} из выражения Id. Нет радости

Спасибо за любую помощь.

Answer 1

Решение здесь состоит в том, чтобы НЕ обернуть параметр с {{}}

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

Содержание vm.clientModel.id это уже строка, и она будет правильно передана как строка (это GUID для JS это строка)

Answer 2

Итак, я думал, что пытался сделать это вчера, прежде чем опубликовать вопрос, но не сделал этого. Вот правильный синтаксис:

<a class="btn btn-sm btn-primary" ui-sref="clientEdit({ clientId: {{'vm.clientModel.id'}} })">Edit Client Test</a>

Обратите внимание, что одинарные кавычки находятся внутри {{ }}, а не снаружи. Просто а?

Этот HTML создает правильный HREF, например так:

<a class="btn btn-sm btn-primary" ui-sref="clientEdit({ clientId: vm.clientModel.id })" href="#/clientEdit/bfd50b6c-6542-48c5-adf7-8c1a21caf421">Edit Client Test</a>