Question

我有一个嵌套标签的视图。所有选项卡内容均由ui-router管理，并且在刷新浏览器时保留选项卡的状态（活动与否）

var app  = angular.module('foundationDemoApp', ['ui.router','mm.foundation']);
app.config([ '$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/home/tab1");
            $stateProvider.state("home", {
                url : "/home",
                templateUrl : "home.html",
                controller : 'HomeCtrl'
            })
            .state("home.tab1", {
                url : "/tab1",
                templateUrl : "tab1.html"
            }).state("home.tab2", {
                url : "/tab2",
                templateUrl : "tab2.html",
                controller : 'Tab2Ctrl'
            }).state("home.tab3", {
                url : "/tab3",
                templateUrl : "tab3.html"
            }).state("home.tab2.subtab1", {
                url : "/subtab1",
                templateUrl : "subtab1.html"
            }).state("home.tab2.subtab2", {
                url : "/subtab2",
                templateUrl : "subtab2.html"
            })      
        } ]);
app.controller('HomeCtrl', ['$scope', '$state', function($scope, $state) {

    $scope.tabs = [
        { heading: "TAB2", route:"home.tab2", active:false },
        { heading: "TAB3", route:"home.tab3", active:false },
    ];

}]);
app.controller('Tab2Ctrl', ['$scope', '$state', function($scope, $state) {

    $scope.tabs = [
        { heading: "SUBTAB1", route:"home.tab2.subtab1", active:false },
        { heading: "SUBTAB2", route:"home.tab2.subtab2", active:false },
    ];
    // manage refresh on nested tabs
    $scope.$on("$stateChangeSuccess", function() {
        $scope.tabs.forEach(function(tab) {
            tab.active = $state.is(tab.route);
        });
    });

}]);

父标签：

<tabset open-on-load ="false">
        <tab ui-sref="home.tab1" ui-sref-active="active">
            <tab-heading>
                 Individual tab
            </tab-heading>
        </tab>
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.heading}}"
            ui-sref="{{t.route}}"
            ui-sref-active="active">
        </tab>
    </tabset>
    <div ui-view></div>

子标签：

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

请在此处查看plunker：http://plnkr.co/edit/U8ZOG6RCayb46iA1BIMl?p=preview

除了我有两个问题外，它工作正常：
- 当我选择包含嵌套选项卡的选项卡（tab2）时，选择了subtab1但没有显示视图，我需要更改为subtab2然后再次返回subtab1以显示视图
- 当我选择包含嵌套选项卡的选项卡（tab2）时，如果我单击subtab2然后单击父选项卡（tab2），它将取消选择父选项卡，然后删除关联的子选项卡视图。我需要禁用此行为

我对这些路线问题有些麻烦请给我建议

非常感谢

Answer 1

您应该重定向到.subtab1子状态，然后才会显示出来。为此，您需要在$state.go

中进行TabCtrl2重定向

var validStates = ['home.tab2.subtab1', 'home.tab2.subtab2'];
if (validStates.indexOf($state.current.name) == -1)
    $state.go('.subtab1');

Demo Plunkr

角度嵌套选项卡和ui-router

1 个答案: