Question

我的状态如下：

.state('main', {url: '/main', templateUrl: 'views/main.html', controller: 'Main'})

我想要做的是另一个/main/details的网址。这将是views/main.html中的div，我只想在此网址中显示。然后他们可以点击一个链接，将它们带回/ main，但会隐藏上面的div并显示另一个div。我该怎么做？

Answer 1

有几种方法可以做到。

如果您不需要在主模板中共享常用内容，只需使用两种状态（非嵌套状态）并将其映射到网址main和main/detail。只要状态名称不包含点，就没有嵌套。

如果要共享main的公共模板并仅为详细状态插入内容，可以使用嵌套。一个非常简单的方法是拥有一个（抽象）主状态，占位符div包含另一个ui-view指令和两个嵌套（子）状态empty和with。然后，这些子状态可以提供应该呈现到主模板中的模板。所以对于empty，模板可以是空的（必须是某个东西，而不是空字符串）。

angular
  .module('main')
  .config(function ($stateProvider) {
    $stateProvider
      .state('main', {
        url: '/main',
        abstract: true,
        template: '<div>some stuff possibly here: <div ui-view></div></div>'
      })
      .state('main.empty', {
        url: '',
        template: ' ' // cannot be empty string
      })
      .state('main.detail', {
        url: '/detail',
        template: '<div>the details</div>'
      });
  });

请注意，您的链接必须将main.empty定位为州名，即使该网址只是/main。

第三个选项也可以是使用命名ui-view，然后通过将内容分配给多个视图来控制内容。但是这个不能提供相当繁琐，因为你需要为每个其他状态引用第一个名为ui-view，它也不支持你提到的嵌套内容。

UI路由器 - 如何创建嵌套状态

1 个答案: