有條件地將查詢字符串附加到角度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）更好更清晰，特別是如果你想圍繞這個值建立一個單元測試。