重新加载页面时，AngularJS 选项卡集不显示正确的状态答案

【问题标题】：AngularJS tabset does not show the correct state when the page is reloaded重新加载页面时，AngularJS 选项卡集不显示正确的状态
【发布时间】：2014-05-17 21:18:16
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angularjs angular-ui-router angularjs-bootstrap

【解决方案1】：

            <li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" >
                <a href="/1">Status1</a>
            </li>


            <li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'">
                <a href="/2">Status</a>
            </li>


    </tabset>

【讨论】：

【解决方案2】：

我在没有选项卡数组和 $stateChangeSuccess 的情况下执行此操作...仍然有一种解决方法。

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

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

对我来说，当页面从 url 刷新或加载时，ui-view 在选项卡元素内不起作用。它们仅在单击选项卡时起作用。因此，一种解决方法是在 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"/>

【讨论】：

【解决方案3】：

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

状态配置

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.

【讨论】：

【解决方案4】：

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

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

这可行，但作为副作用，会在框架置于“活动”状态的 $watch 上生成异常。

【讨论】：