Question

我正试图为我的一个观点找到一种方法来拥有多个状态。假设我有这个模板：

<body>
  <div ui-view="overlay">
  <div ui-view="content">
</body>

......以及这些路线：

$stateProvider
  .state('base', {
    url: '',
    abstract: true,
     views: {
      'overlay': {
        templateUrl: '/src/overlay.html'
      }
    }
  })
  .state('base.page1', {
    url: '/page1/',
    views: {
      'content@': {
        templateUrl: '/src/page1.html'
      }
    }
  })
  .state('base.page2', {
    url: '/page2/',
    views: {
      'content@': {
        templateUrl: '/src/page2.html',
      }
    }
  });

这允许我在page1和page2上显示“叠加”视图。

“覆盖”视图需要能够在不影响页面上任何其他内容的情况下更改其状态。我可以将“overlay”设置为父状态并向其添加子项，但我无法找到一种方法来激活overlay.child状态内的任何base状态而不会丢失任何状态处于base状态。有人能指出我正确的方向吗？

编辑：plunker here http://plnkr.co/edit/vPmNhVLZNI2fOAZZOHkg

Answer 1

你的问题不是很清楚，但也许你想要的是让它们嵌套？

<div ui-view="parent">
    <div ui-view="child">

    </div>
</div>


$stateProvider
    .state('parent', {
        url: "/",
        views: {
            'parent': {
               templateUrl: '/view/parent.html'
            }
        }
    })
    .state('parent.child', {
        url: "/",
        views: {
            'child@parent': {
               templateUrl: '/view/child.html'
            }
        }
    })

或者这不是你想要的吗？

编辑：

this solution

怎么样？

如果您需要，可以将变量用于当前状态，这样就不必为routeProvider中的所有父状态定义覆盖状态，如this dirty example所示：

EDIT2：

你真正想要的是平行状态。您可以阅读有关该主题的here，然后您会发现ui-router尚不支持它。但正如我在下面的评论中所写，如果你真的不需要状态变量，你可以看看ng-switch，因为你可以用该指令创建类似的并行行为。

对ui-router嵌套感到困惑

1 个答案:

编辑：

EDIT2：