Question

假设我的应用有两面：＆＃34;左边＆＃34;和＃34;对＆＃34;。每一面都有标签。管理应用程序的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'次观看的内容。我怎么能这样做？

我尝试在reloadOnSearch: false配置中设置'splitscreen'，但我的标签根本无法点击。

这里是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中基于查询的兄弟视图路由

1 个答案: