ui-router 中兄弟视图的基于查询的路由

Question

假设我的应用有两个方面："left" 和 "right"。每一面都有标签。管理应用程序的 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>

这是我的状态：

$stateProvider.state('splitscreen', {
    url: '/splitscreen?leftTab&rightTab',
    views: {
        'app': {
            templateUrl: 'splitscreen.tpl.html'
        },
        'left@splitscreen': {
            template: 'I\'m left'
        },
        'right@splitscreen': {
            template: 'I\'m right'
        }
    }
});

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

我尝试在 'splitscreen' 配置中设置 reloadOnSearch: false，但是我的选项卡变得根本无法点击。

这里是 plunker。

Answer 1

所以，看来 ui-router 不能做我想做的事。太可惜了。

我暂时解决了：

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

函数定义为：

$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

ui-router 中兄弟视图的基于查询的路由

query-based routing of sibling views in ui-router

javascript

angularjs

angular-ui-router