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

query-based routing of sibling views in ui-router

本文关键字：路由 视图 查询 路由器 于查询 ui      更新时间：2023-09-26

假设我的应用程序有两面："左"answers"右"。每一边都有标签。管理应用程序的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，但随后我的选项卡变得根本无法单击。

这是一个灌篮器。

所以，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>

其中功能定义为：

$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
相关文章：