Question

这是我的应用程序布局。我正在使用Angular UI路由器，并希望侧边栏1和2成为视图。侧边栏1顶部还有一个菜单，我希望将其页面路由到其中。我不知道如何用嵌套的视图和状态来构建它 - 任何人都可以给我一些建议吗？

Answer 1

如果我理解正确，Multiple Named Views的维基页面将有助于指导您。它详细说明了给定状态如何使用命名的ui-view元素定位UI的不同部分。

例如，如果您的网页有：

<body>
  <div ui-view="sidebar1"></div>
  <div ui-view="main"></div>
  <div ui-view="sidebar2"></div>
</body>

然后，您可以明确地为每个部分设置一个状态目标：

$stateProvider
  .state('someState', {
    views: {
      'sidebar1': {
        templateUrl: 'someState-sidebar1.html',
        controller: 'controllerName'
       },
      'main': {
        templateUrl: 'someState-main.html',
        controller: 'controllerName'
       },
      'sidebar2': {
        templateUrl: 'someState-sidebar2.html',
        controller: 'controllerName'
       }
    }
  });

您的应用程序一次只能处于一种状态，因此将其与状态继承的工作方式结合起来。父状态可以定位其中一个命名视图（例如sidebar1）并让子状态填充main。

我希望这对你有用。

具有状态的Angular UI路由器视图

1 个答案: