有条件地将查询字符串附加到角度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

最好为控制器中的url制作一个模型而不是像这样，它还可以避免许多$ watch绑定，从而获得更好的性能和更清晰

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

在控制器中：

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

Answer 2

我在Controller中进行URL构建。

HTML

<a ng-href="getQueryUrl()">Click here!</a>

Controller.js

$scope.getQueryUrl = function getQueryUrlFn(){
   return "/foo/bar?query=abc";
}

Answer 3

要回答您的具体问题，您的尝试无效，因为您在其他双引号中使用了双引号""。将<a>更改为以下内容即可：

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

但是，我同意其他答案 - 有时候在控制器中生成一个值（在本例中为URL）更好更清晰，特别是如果你想围绕这个值构建一个单元测试。