Question

我有一个项目，我需要2个布局。一个基本上是1列（作为登陆页面的种类）和一个在顶部有菜单的，并且基本上是相同的1列布局。

我已经设置了两个布局HTML，我在我的状态中使用它，但问题是每次我从一个状态切换到另一个状态时，整个HTML位于最顶层的ui-view （身体中的那个）改变了。

这是我的设置：

路线

.state('root', {
    url: '',
    abstract: true,
    templateUrl: 'app/layouts/logged-in.html'
})
.state('root.homepage', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
})
.state('candidate', {
    url: '/candidate',
    abstract: true,
    templateUrl: 'app/layouts/logged-in.html'
})
.state('candidate.profile', {
    url: '/profile',
    templateUrl: 'app/candidate/profile.html',
    controller: 'CandidateProfileController',
    controllerAs: 'profile'
})

的index.html

<body>
    <div ui-view></div>
</body>

登录in.html

<div>
    <my-navbar></my-navbar>
</div>
<div ui-view></div>

登录out.html

<div ui-view></div>

问题是，在root.homepage和candidate.profile之间切换时，my-navbar会被删除，然后重新附加，用户可以暂时看到（直到新的HTML加载）。我知道其中一个状态是logged-out.html布局而另一个是logged-in.html布局，但是我们讨论的是同一个文件，我只想更新{{ 1}}来自ui-view文件。

Answer 1

最好为登录（包括导航栏）创建一个抽象状态，然后在里面引入div来放置命名视图mainContent。并配置所有状态以扩展登录状态，并定义视图：{'mainContent'：{controller：...，templateUrl：...}}

使用UI-Router的多个布局

1 个答案: