html - AgularJS ui-router の非階層ビューを使用した階層状態

Question

3 つの列を持つページを作成する必要があります。

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

階層状態に基づく非階層ビュー レイアウトを実現するために、異なるビュー .html ファイルのどこにどのように ui-view 属性を配置するのかわかりません。

index.html:

<div ui-view></div>

ライブラリ.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>

状態階層を維持しながら、子ビューを親の兄弟にすることは可能ですか?