Question

假设我有一部电影应用。它有Home / About / Films页面。电影页面有子类别：喜剧/戏剧。目前，我正在努力进行导航。目标是当我点击Home时 - 它应该呈现回家。 About - 关于。 Films - 渲染所有电影（例如标题/流派/年份的简单卡片）。当我点击Films->Comedy时 - 它应该使用与Films相同的控制器，渲染完全相同的模板但只有喜剧电影。此外，导航应与Films和Comedy一起使用。

我创建了plunker来演示第一种方法https://plnkr.co/edit/d0Db18ZJYtQx6aJEZ3xa?p=preview 所以我的第一个方法是：

.state('layout.films', {
  url: '/films',
  controller: 'FilmsCtrl as films',
  template: '<div>All films</div>'
})
.state('layout.films.genre', {
  url: '/:genre',
  controller: 'FilmsCtrl as films',
  template: '<div>{{ films.genre }} films</div>'
})

和这个布局：

<div class="layout">
  <ul>
    <li><a ui-sref-active="_active" ui-sref="layout.home">home</a></li>
    <li><a ui-sref-active="_active" ui-sref="layout.about">about</a></li>
    <li>
      <a ui-sref-active="_active" ui-sref="layout.films">films</a>
      <ul>
        <li><a ui-sref-active="_active" ui-sref="layout.films.genre({genre: 'comedy'})">comedy</a></li>
        <li><a ui-sref-active="_active" ui-sref="layout.films.genre({genre: 'drama'})">drama</a></li>
      </ul>
    </li>
  </ul>
  <hr>
  <div ui-view></div>
</div>

但这不起作用。原来是嵌套状态需要嵌套视图。我很伤心。并尝试了第二种方法：https://plnkr.co/edit/3YWAoLcPU3fd2FdebWpD?p=preview

我只制作了一部电影：

.state('layout.films-genre', {
  url: '/films/:genre?',
  controller: 'FilmsCtrl as films',
  template: '<div>{{ films.genre }} films</div>'
})

使用固定布局：

  <a ui-sref-active="_active" ui-sref="layout.films-genre">films</a>
  <ul>
    <li><a ui-sref-active="_active" ui-sref="layout.films-genre({genre: 'comedy'})">comedy</a></li>
    <li><a ui-sref-active="_active" ui-sref="layout.films-genre({genre: 'drama'})">drama</a></li>
  </ul>

似乎工作。它甚至可以正确地突出显示菜单项（哇）。但实际上......我无法将状态从films->comedy更改为films。接下来的想法是改变所有电影的链接：

  <a ui-sref-active="_active" ui-sref="layout.films-genre({genre: ''})">films</a>

但是当我点击其中一个类型时，它现在没有突出显示根菜单项（电影）。我该怎么做才能实现所期望的行为？

Answer 1

如果我理解你的问题，你想要一个可以呈现特定类型电影的页面吗？

如果是这样，我认为你应该查看stateParams。这样，您可以拥有一个菜单，所有菜单都指向同一个子视图，但会发送不同的参数。然后根据发送的参数对电影列表进行排序。

它看起来像这样：

.state('layout.films-genre', {
  url: '/films',
  controller: 'FilmsCtrl as films',
  template: '<div> Template goes here </div>'
  params: { genre: 'all' } // as default if I remember correctly
})

您也可以在此找到问题的答案： How to pass parameters using ui-sref in ui-router to controller

Angular ui-router嵌套状态没有嵌套视图

1 个答案: