javascript - 有条件地将查询字符串附加到 Angular href

Question

我正在 AngularJS v1.2.16 中构建一些链接，如下所示:

<a ng-href="/foo/{{id}}/t/{{list[m].id}}/{{id2}}/{{otherId}}">Click here!</a>

效果很好。

现在我有一个查询参数 query 如果它存在，我想追加到末尾。

我试着这样做:

<a ng-href="/foo/{{id}}/{{otherId}}{{ query ? '?q=' + query : "" }}">Click here!</a>

我最终得到以下结果，因为 Angular 只是将标签的全部内容渲染到链接中，如下所示:

<a href="/foo/2/4%7B%7B%7B%20query%20?%20%27?q=%27%20+%query%20:">Click here!</a>

我怎样才能实现我想做的事情？

Answer 1

在 Controller 中为 url 创建一个模型比那样做更好，它还会避免许多 $watch 绑定(bind)，因此性能更好，更清洁

<a ng-href="{{myUrl}}">Click here!</a>

在 Controller 中:

$scope.myUrl = 'foo/'+id+'/.../'+(qry ? ...)+'...';