Question

我正在构建一个webapp，其中包含一些显示在每个“页面”上的元素，以及一个区域，其中内容根据导航到的“页面”而变化。为了实现这一点，我正在使用具有多个命名视图和嵌套状态的ui-router。当我尝试在其父级的一个命名视图中嵌套状态时，我的问题出现了。我认为我没有正确定位父级中的命名视图，因为没有显示嵌套状态。

    $stateProvider
        .state('stc', {
            abstract: true,
            url: '/',
            views: {
                'shell': {
                     template: '<div ui-view="topbar"></div>' +
                               '<div ui-view="navbar"></div>' +
                               '<div ui-view="content"></div>'
                }
            }
        })
        .state('stc.sections', {
            url: '',
            views: {
                'topbar@stc': {
                    template: "<p>top bar</p>"
                },
                'navbar@stc': {
                    template: "<p>nav bar</p>"
                },
                'content@stc': {
                    template: '<div ui-view></div>'
                }
            }
        })
        .state('stc.sections.homepage', {
            url: '/',
            template: '<h1>Nested Home Page Content</h1>'
        });

我无法弄清楚如何定位父命名视图：content@stc，以便我可以根据网址嵌套动态内容。在这种情况下，我正在尝试加载主页内容。

是否需要一些特殊符号来定位命名视图？

Answer 1

我最终从url: ''配置中删除了行stc.sections，并在`state.sections.homepage配置中将url: '/'替换为url: ''。我现在能够使用以下内容为兄弟页面添加路由：

        .state('stc.sections.login', {
            url: 'login',
            controller: 'main.common.login as loginCtrl',
            template: require('./views/login.html')
        })

并在浏览器中使用

等网址访问它们

mydomain.com /
mydomain.com/login
mydomain.com/signup
等

修改后的代码

$stateProvider
    .state('stc', {
        abstract: true,
        url: '/',
        views: {
            'shell': {
                 template: '<div ui-view="topbar"></div>' +
                           '<div ui-view="navbar"></div>' +
                           '<div ui-view="content"></div>'
            }
        }
    })
    .state('stc.sections', {
        views: {
            'topbar@stc': {
                template: "<p>top bar</p>"
            },
            'navbar@stc': {
                template: "<p>nav bar</p>"
            },
            'content@stc': {
                template: '<div ui-view></div>'
            }
        }
    })
    .state('stc.sections.homepage', {
        url: '',
        template: '<h1>Nested Home Page Content</h1>'
    })
    .state('stc.sections.login', {
        url: 'login',
        template: '<h1>Login Here</h1>'
    })

Angular和ui-router - 如何在父状态的命名视图中配置嵌套状态

1 个答案: