Question

我在AngularJS SPA中使用angular-ui-router以及bootstrap tabset指令。

以下是我的示例http://plnkr.co/V0Cs6BfnggXshawMv4LX以及重现问题的步骤。

在“全屏”中启动plunker，以便轻松重新加载页面。
点击“Child Two”标签。
浏览器中的URL正确显示状态为/ home / child2
重新加载页面。
浏览器中的URL仍显示状态为/ home / child2

问题是tabset的UI现在显示选中的“Child One”选项卡，即使状态为“home.child2”。是否有自动方式使标签显示正确的状态？

Answer 1

我没有tab数组和$ stateChangeSuccess这样做了......还有一个解决办法。

这将控制点击和活动状态：

<tab ui-sref="home.child1" ui-sref-active="active"></tab>

对我来说，当页面最初从网址刷新或加载时，ui-view在tab元素内部不起作用。它们仅在单击选项卡时才起作用。因此，解决方法是在tabset下列出ui-views。

<tabset><tab ui-sref="home.child1" ui-sref-active="active"></tab></tabset>
<div ui-view="home.child1"></div>

现在，只有正确的ui-view才会显示刷新和点击导航工作。

我不确定这是否特定于我的应用;但第一个标签始终处于活动状态。作为第一个标签的已禁用标签是解决方法：<tab disabled="true"/>

Answer 2

前几天我遇到了同样的问题。经过一些研究，我发现了一个可能对您有帮助的解决方案：

州配置

angular.module('app', [
'ui.router'
])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('home'); // For any unmatched url, redirect to home.

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: "", // First template.
            controller: "homeController"
    })

        .state('home.child1', {
            url: '/child1',
            templateUrl: "", // Second template.
            controller: "homeController"
    })
        .state('home.child2', {
            url: '/chil2',
            templateUrl: "", // Third template.
            controller: "homeController"
    })
        .state('home.childn', {
            url: '/chiln',
            templateUrl: "", // n template.
            controller: "homeController"
    });
}])

控制器

.controller('homeController', ['$scope', '$state', function($scope, $state) {

$scope.active = function(route) {
    return $state.is(route);
};

$scope.tabs = [
    { heading: "Home", route:"home", active:false }, // Tab 1
    { heading: "Child One", route:"home.child1", active:false }, // Tab 2
    { heading: "Child Two", route:"home.child2", active:false }, // Tab 3
    { heading: "Child n", route:"home.childn", active:false } // Tab n
];

$scope.$on("$stateChangeSuccess", function() { // Keep the right tab highlighted if the URL changes.
    $scope.tabs.forEach(function(tab) {
        tab.active = $scope.active(tab.route);
    });
});
}]);

最后但并非最不重要的，HTML

<tabset>
<tab 
ng-repeat="tab in tabs" 
heading="{{ tab.heading }}"
ui-sref="{{ tab.route }}"
active="tab.active">
</tab> 
</tabset>

Here is the demo.

Answer 3

我发现的一种方法是为每个标签添加一个过滤器，如果该标签的状态是当前状态，则将其设置为true。

<tab heading="Heading For First Tab" active="('home.tab1' | isState)" />

这是有效的，但作为一个副作用，在框架放置的活动＆＃39;上生成了一个例外。

重新加载页面时，AngularJS tabset不显示正确的状态

3 个答案: