Question

如何设置ui-router以允许视图继承？目前，我的ui-router设置类似如下，

$stateProvider

            .state('public', {
                url: '/public',
                templateUrl: 'partials/public.html',
                controller: 'PublicController'
            })

            // abstract parent
            .state('private', {
                abstract: true,
                views: {
                    '': { 
                        template: '<ui-view></ui-view>'
                    },

                    'nav': {
                        templateUrl: 'partials/nav.html'
                    }
                }
            })

            // concrete private child state
            .state('private.pageone', {
                url: '/pageone',
                views: {
                    '': {
                        templateUrl: 'partials/pageone.html',
                        controller: 'PageOneCtrl'
                    }
                }
            })

除了没有继承父nav视图之外，一切运行正常，因此我无法在子状态显示中看到nav。另一方面，如果我摆脱父状态然后将nav视图直接移动到子状态...我可以显示nav。任何人都可以向我解释为什么我似乎无法继承nav，即使将孩子指定为private.pageone（与parent: 'private'相同）。

Answer 1

ui-router的文档提到相对视图实际上以父状态为目标。因此，为了能够在这种特殊情况下使用相对视图，我们必须执行以下操作。

$stateProvider

        .state('public', {
            url: '/public',
            templateUrl: 'partials/public.html',
            controller: 'PublicController'
        })

        // abstract parent
        .state('private', {
            abstract: true,
            views: {
                '': { 
                    template: '<ui-view></ui-view>'
                }
            }
        })

        // concrete private child state
        .state('private.pageone', {
            url: '/pageone',
            views: {
                '': {
                    templateUrl: 'partials/pageone.html',
                    controller: 'PageOneCtrl'
                },

                // target the <div ui-view="nav"></div> in the parent template
                'nav': {
                    templateUrl: 'partials/nav.html'
                }
            }
        })

或者，可以使用绝对视图而不是相对视图，如下所示。

$stateProvider

            .state('public', {
                url: '/public',
                templateUrl: 'partials/public.html',
                controller: 'PublicController'
            })

            // abstract parent
            .state('private', {
                abstract: true,
                views: {
                    '': { 
                        template: '<ui-view></ui-view>'
                    },

                    // note how nav has been specified absolutely
                    'nav@private': {
                        templateUrl: 'partials/nav.html'
                    }
                }
            })

            // concrete private child state
            .state('private.pageone', {
                url: '/pageone',
                views: {
                    '': {
                        templateUrl: 'partials/pageone.html',
                        controller: 'PageOneCtrl'
                    }
                }
            })

如何设置ui-router以允许视图继承？

1 个答案: