Question

我的应用程序有一堆使用ui-router

定义的状态

home.js

//.... 
.config(($stateProvider, $urlRouterProvider) => {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('home', {
        url: '/',
        template: '<home></home>',
        access: {restricted: false}
    })
    .state('single',{
        url: '/post/:slug',
        params: {id: undefined},
        template: '<single></single>',
        access: {restricted: false}
    })
})
// ... some other stuff

与此同时，我在admin.js中定义了CMS路由，如下所示：

import createTemplate from './create/create.post.html';
import adminLayout from './admin.layout.html';

.config(($stateProvider, $urlRouterProvider) => {
    $stateProvider
        .state('admin', {
            abstract: true,
            url: '/admin',
            template: adminLayout
        })

        .state('admin.create', {
            url: '/create',
            template: createTemplate,
            access: {restricted: true}
        })
        .state('admin.posts', {
            url: '/posts',
            template: '<allposts></allposts>',
            access: {restricted: true}
        })
        .state('admin.edit', {
            url: '/edit/:id',
            template: '<editpost></editpost>',
            access: {restricted: true}
        });
})

我有2个主布局 - 一个用于非CMS路由，另一个用于CMS路由。保持它们不同的原因是因为它们具有不同的UI元素;不同的，足以证明他们保持不同的布局。

app.html

<div class="app">
<div class="container">
    <div class="body row">
        <div class="col-md-2">
            <navbar menu-items="ac.navItems" orientation="vertical" logo="true"></navbar>
        </div>

        <div ui-view></div>

        <footer class="col-md-6 col-md-offset-2">
            <span translate="{{'footer.copyright_symbol.fragment'}}"></span>
            {{'footer.copyright_years.fragment' | translate}} {{'colophon.author_name.fragment' | translate}}
        </footer>
    </div>
</div>

admin.layout.html

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

我遇到的问题是，每当我导航到/admin/create或任何admin路线时，我都会看到app.html 的布局以及 admin.layout.html的布局。

如何配置ui-view以便我可以为非CMS路由和CMS路由提供不同的布局？

Answer 1

尝试为每个不同的视图指定一个特定的名称，请参阅：

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-views

针对不同状态的不同和单独的<ui-view>

1 个答案: