Javascript ui路由器中基于查询的同级视图路由

假设我的应用程序有两个方面：左侧和右侧。每一面都有标签。控制应用程序的URL如下所示：

app/splitscreen/?leftTab=1&rightTab=1

到目前为止，我有以下HTML模板：

<!-- splitscreen.tpl.html -->

<!-- left side -->
<a ui-sref="splitscreen({leftTab: 1})">Left tab 1</a>
<a ui-sref="splitscreen({leftTab: 2})">Left tab 2</a>

<div ui-view="left"></div>

<!-- right side -->
<a ui-sref="splitscreen({rightTab: 1})">Right tab 1</a>
<a ui-sref="splitscreen({rightTab: 2})">Right tab 2</a>

<div ui-view="right"></div>

问题是单击选项卡会重新加载整个“splitscreen”状态。我只想更新“左”和“右”视图的内容。我该怎么做

我尝试在“splitscreen”配置中设置reloadOnSearch:false，但随后我的选项卡变得完全不可单击

---

这是一个。

所以，ui路由器似乎无法完成我想要的任务。太糟糕了

我暂时用以下方法解决了这个问题：

<a
 ng-click="setTab('1')"
 ng-class="'tab' + (getTab() === '1' ? '--selected' : '')">
    Tab 1
</a>
<a
 ng-click="setTab('2')"
 ng-class="'tab' + (getTab() === '2' ? '--selected' : '')">
    Tab 2
</a>

<div ng-include="getTabUrl()"></div>

州政府有以下选择：

url: '/foo?tab',
reloadOnSearch: false

---

“现在已经倒下了……”迈克尔。它回来了；P

$scope.setTab = function (tabName) {
    $location.search('tab', tabName);
};

$scope.getTab = function (tabName) {
    return $location.search().tab;
};

$scope.getTabUrl = function () {
    return 'foo/' + $scope.getTab() + '.tpl.html';
};

url: '/foo?tab',
reloadOnSearch: false