Question

我目前有一个带有单个ui-view的root index.html，取决于哪个＆＃34; page＆＃34;用户打开，例如书籍，游戏等。以书籍页面为例，此视图包含我希望在所有页面上显示的内容，这些内容属于＆＃34; Books＆＃34;空间，但中心内容将根据用户是否在图书＆＃34;主页＆＃34;或者看一本特定的书。为方便起见，我的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？< / p>

我目前正在通过拥有一个＆＃34;家庭＆＃34;来解决这个问题。子状态，但这意味着我必须有/ 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',
    ...
})

Answer 1

我通过声明一个抽象状态实现了我所需要的：

.state('books', {
    abstract: true,
    url: '/books',
    templateUrl: CONFIG.static_url + '/html/books.html',
    ...
})
.state('books.home', {
    url: '',
    templateUrl: CONFIG.static_url + '/html/books_list.html',
    ...
})
.state('books.detail', {
    url: '/:bookId',
    templateUrl: CONFIG.static_url + '/html/books_detail.html',
    ...
})

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

Answer 2

我创建了working example here。这符合您的需求，因为只有两个嵌套级别。

books是两个孩子的父母
- books.home填充中间区域 - 并且不是books.detail
- books.detail替换了列表视图 - 但这意味着其$ scope （books.home）已丢失

州定义：

.state('books', {
    url: '/books',
    views: {
      '@' : {
        templateUrl: 'layout.html',
      },
      'left@books' : { templateUrl: 'tpl.left.html',},
      'right@books' : { templateUrl: 'tpl.right.html',},
    },
  })
.state('books.home', {
    url: '/home',
    templateUrl: 'list.html',
  })
.state('books.detail', {
    url: '/:bookId',
    templateUrl: 'detail.html',
    controller: 'DetailCtrl'
  })

检查here

但也有a different approach，我更喜欢。列表视图是其子项的父项，因此它可以保留其$ scope，同时在详细信息中导航。类似的内容讨论了here

Answer 3

也许试试吧

$urlRouterProvider.otherwise('/');
.....
.state('index', {
    url: '/',
    templateUrl: CONFIG.static_url + '/html/index.html',
    ...
})

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

3 个答案: