Question

我正在尝试使用route创建ui-router层次结构，我遇到了问题。

我有三层模板：访客模板，用户模板，管理模板。所以我的index.html页面是：

<html>
<head><!-- All common JS/CSS files such as Foundation and AngularJS --></head>
<body>
    <!-- Some common directive such as <reveal></reveal> used for dialog/popin pages -->
    <ui-view></ui-view>
</body>
</html>

然后，对于我的每个图层，我都有另一个模板。例如，对于guest我有：

guest.html

<nav><!-- The navigation for guest page --></nav>
<ui-view></ui-view>

和user稍微复杂一点：

user.html

<nav><!-- The navigation for user page --></nav>
<ui-view="left"></ui-view>
<ui-view="main"></ui-view>
<ui-view="right"></ui-view>

现在，guest的状态非常简单：

$stateProvider
    .state('guest', {
        abstract: true,
        templateUrl: 'path/to/guest.html' 
    })
    .state('guest.login', {
        url: '/login/',
        template: '<login></login>'
    });

user出现问题。就像上面一样，我创建了一个abstract状态，将user.html添加到模板中，让我可以访问3个视图。通常，如果我然后扩展状态，我可以写为三个状态

.state('user.home', {
    url: '/home/',
    views: {
        'left':  { template: 'Left template' },
        'main':  { template: 'Main template' },
        'right': { template: 'Right template'}
    }
});

问题是我想在这里定义另一个抽象，称为user.schedule，这些抽象状态有几个孩子。当我确定这个状态时，我仍然希望能够访问我最初在user.html中创建的三个视图。但是，由于这是一个抽象类，我需要为它定义模板。

我无法弄清楚如何继续这个抽象类。我“想到”我应该做的是：

.state('user.schedule', {
    abstract: true,
    views: {
        'left':  { template: '<ui-view></ui-view>' },
        'main':  { template: '<ui-view></ui-view>' },
        'right': { template: '<ui-view></ui-view>'}
    }
})
.state('user.schedule.view', {
    url: '/schedule/:day/:month/:year',
    views: {
        'left':  { template: 'This should work?' },
        'main':  { template: 'But it does not' },
        'right': { template: 'I even tried giving the ui above a name and calling them here'}
    }
})

我该怎么办？

Answer 1

我非常确定您在user.html中定义的左/右/右视口仅适用于user抽象状态的直接子项。然后，您在user.schedule.view状态中声明的视图必须与user.schedule模板中的命名视口对应。

尝试在user.schedule模板left，main和right中命名视口。可能会发生名称冲突，但嘿，它值得一试。

即。改变这个：

.state('user.schedule', {
    abstract: true,
    views: {
        'left':  { template: '<ui-view></ui-view>' },
        'main':  { template: '<ui-view></ui-view>' },
        'right': { template: '<ui-view></ui-view>'}
    }
})
.state('user.schedule.view', {
    url: '/schedule/:day/:month/:year',
    views: {
        'left':  { template: 'This should work?' },
        'main':  { template: 'But it does not' },
        'right': { template: 'I even tried giving the ui above a name and calling them here'}
    }
})

到此：

.state('user.schedule', {
    abstract: true,
    views: {
        'left':  { template: '<ui-view="left"></ui-view>' },
        'main':  { template: '<ui-view="main"></ui-view>' },
        'right': { template: '<ui-view="right"></ui-view>'}
    }
})
.state('user.schedule.view', {
    url: '/schedule/:day/:month/:year',
    views: {
        'left':  { template: 'This should work?' },
        'main':  { template: 'But it does not' },
        'right': { template: 'I even tried giving the ui above a name and calling them here'}
    }
})

另外，我不确定这是否是正确的形式：

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

我我确定这是正确的形式（per the docs）：

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

或

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

ui-router在抽象父级上有多个视图

1 个答案: