微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AngularJS:如何使用UI路由器实现默认嵌套状态?

我目前有一个带有单个ui-view的root index.html,它取决于用户所在的“页面”,例如书籍,游戏等.以书籍页面为例,此视图包含我想要在“书籍”空间的所有页面显示内容,但中心内容将根据用户是否开启而有所不同书籍“主页”或看一本特定的书.为方便起见,我的books.html有一个嵌套状态,其中包括books_list.html或books_detail.html.

我想要的网址结构是:

> / books – 显示左/右侧面板以及页面间的书籍列表.
> / books / 1 – 显示左/右侧面板以及页面中间ID为1的书籍的详细信息(不显示书籍列表).

如何在导航到/ books时将我的状态设置为嵌套视图中的books.html模板和books_list.html模板,但在导航到/ books / 1时有books.html AND books_detail.html?

我目前通过拥有“家庭”子状态来解决这个问题,但这意味着我必须拥有/ books / home,并且/ books显示没有中心内容,因此目前无用.

.state('books',{
    url: '/books',templateUrl: CONfig.static_url + '/html/books.html',...
})
.state('books.home',{
    url: '/home',templateUrl: CONfig.static_url + '/html/books_list.html',...
})
.state('books.detail',{
    url: '/:bookId',templateUrl: CONfig.static_url + '/html/books_detail.html',...
})
我通过声明一个抽象状态实现了我所需要的:
.state('books',{
    abstract: true,url: '/books',{
    url: '',...
})

这意味着/ books加载’books’和’books.home’状态,/ books / 1加载’books’和’books.detail’状态,这就是我需要的.

原文地址:https://www.jb51.cc/angularjs/142319.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐