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

Question

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

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

• 在“全屏”中启动 plunker，以便可以轻松地重新加载页面。
• 单击“儿童二”选项卡。
• 浏览器中的 URL 正确显示状态为 /home/child2
• 重新加载页面。
• 浏览器中的 URL 仍然显示状态为 /home/child2

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

Answer 1

我在没有选项卡数组和 $stateChangeSuccess 的情况下做到了这一点......仍然有一种解决方法。

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

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

对我来说，当页面从 url 刷新或加载时，ui-view 在选项卡元素内不起作用。它们仅在单击选项卡时起作用。因此，一种解决方法是在选项卡集下列出 ui-views。

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

现在，只有正确的 ui-view 会在刷新时显示并单击 nav 作品。

我不确定这是否特定于我的应用程序；但第一个选项卡始终处于活动状态。作为第一个选项卡的禁用选项卡是解决方法：<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>

这是演示。

Answer 3

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

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

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

Answer 4

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