在AgularJS ui-router

Question

我必须构建一个包含三列的页面：

<div>
   <div>Library Column</div>
   <div>Book Column</div>
   <div>Page Column</div>
</div>

我有3个分层的ui状态：

.state("library", {
    url: "/library",
    templateUrl: "../app/views/library.html", // <div>Library Column</div>
    controller: "libraryCtrl"
})
    .state("library.book", {
        url: "/:bookid",
        templateUrl: "../app/views/book.html", // <div>Book Column</div>
        controller: 'bookCtrl'
    })
        .state("library.detail.publish", {
            url: "/:pagenr",
            templateUrl: "../app/views/page.html", // <div>Page Column1</div>
            controller: 'pageCtrl'
        })

我无法弄清楚ui-view属性在不同视图.html文件中的位置和方式，以实现基于分层状态的非分层视图布局。

的index.html：

<div ui-view></div>

library.html：

<div>Library Column</div>
<div ui-view></div>

book.html：

<div>Book Column</div>
<div ui-view></div>

page.html中：

<div>Page Column</div>

显然最终会出现分层视图布局，这对我的情况来说是不可接受的（例如状态＃/ library / 1/20）：

<div ui-view>
   <div>Library Column</div>
   <div ui-view>
        <div>Book Column: Book 1</div>
        <div ui-view>
            <div>Page Column: Page 20</div>
        </div>
    </div>
</div>

是否可以维持状态层次结构，但强制子视图是其父母的兄弟姐妹？