Html 在AgularJS ui路由器中使用非分层视图的分层状态

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

<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'
        })

.state（“库”{
url:“/library”，
templateUrl:“../app/views/library.html”，//库列
控制器：“libraryCtrl”
})
.state（“library.book”{
url:“/：bookid”，
templateUrl:“../app/views/book.html”，//图书列
控制器：“bookCtrl”
})
.state（“library.detail.publish”{
url:“/：pagenr”，
templateUrl:“../app/views/page.html”，//第1页
控制器：“pageCtrl”
})

我不知道如何在不同的view.html文件中放置ui视图属性，以实现基于层次状态的非层次视图布局

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>

页面列

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

图书馆专栏
图书专栏：第一册
页码栏：第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>