1

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

<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 文件中的位置和方式，以实现基于分层状态的非分层视图布局。

索引.html：

<div ui-view></div>

库.html：

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

书.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>

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

4

0 回答 0