Question

我有一个articledetail状态，我导航到：

$state.go('articledetail', { 'article': article.itemNumber });

在articleDetail.html中，我想同时加载子视图：

    <div class="tab-content col-xs-7">
        <div ui-view="tab1"></div>
        <div ui-view="tab2"></div>
        <div ui-view="tab3"></div>
        <div ui-view="tab4"></div>
        <br />
</div>

以下是我的状态配置。我已经尝试过使用@和不使用@，但我的视图（甚至不是主视图）都没有被加载，我没有收到任何错误。

    $stateProvider.state('articledetail', {
        url: '/articledetail/:article',
        templateUrl: '/articledetail/articleDetail.html',
        controller: 'articleDetailController',
        controllerAs: 'vm',
        views: {
            'tab1@': {
                templateUrl: '/articledetail/tab1.html'
            },
            'tab2@': {
                templateUrl: '/articledetail/tab2.html'
            },
            'tab3@': {
                templateUrl: '/articledetail/tab3.html'
            },
            'tab4@': {
                templateUrl: '/articledetail/tab4.html'
            }
        }
    });

令人沮丧的是我没有得到任何错误，所以我不知道我做错了什么。我已经启用了错误日志记录，如ui-router FAQ中所述，但没有结果。

我做错了什么？

Answer 1

您需要在index.html

中使用此功能

<div ui-view=""></div>

然后状态可以改为：

$stateProvider.state('articledetail', {
    url: '/articledetail/:article',
    views: {
        // this would instractu UI-Router
        // to inject the articleDetail.html into index.html
        // into target ui-view="" (would be the same as '@')
        '': {
            templateUrl: '/articledetail/articleDetail.html',
            controller: 'articleDetailController',
            controllerAs: 'vm',
        },
        // these will now be injected into above view,
        // and absolute name says: viewName@stateName
        // and the state is 'articleDetail'
        // so we need 'tab1@articledetail'
        'tab1@articledetail': {
            templateUrl: '/articledetail/tab1.html'
        },
        'tab2@articledetail': {
            templateUrl: '/articledetail/tab2.html'
        },
        'tab3@articledetail': {
            templateUrl: '/articledetail/tab3.html'
        },
        'tab4@articledetail': {
            templateUrl: '/articledetail/tab4.html'
        }
    }
});

状态不同的子视图

1 个答案: