如何在多个视图中设置嵌套视图

Question

我有两个命名视图和一个未命名视图，如下所示：

//department.html
<div class="col-md-2">
        <div ui-view="sideBar"></div>
 </div>

 <div class="col-md-10">

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

        <div ui-view></div>

 </div>

我的路线：

.state('Support', {
    url: '/support',
    views: {
       '': { templateUrl: 'app/components/department/department.html'  },

       'sideBar@Support': {
                           templateUrl: 'app/shared/sideBar/sideBar.html',
                           controller: 'SideBarController'
                          },

        'content@Support':{
                           templateUrl: 'app/components/department/support/partial-support.html',
                           controller: 'SupportController'
                          },

      }        
  })


.state('Support.view', {
  url: '/view',
  template: '<b> Hi there nested!!</b>'
});

我需要什么：

localhost/support ：这是一个父 url，因为 url 注入了两个命名视图（边栏和内容），这对我有用。
localhost/support/view ：在此路由器中，我想要一个子视图来替换 content 视图或替换两个多个视图。

问题是：我无法使嵌套视图正常工作，我做错了什么吗？

PS：我已经阅读了 ui-router 文档并查看了其他问题，我找不到任何类似的场景。

Answer 1

您的方案在未启用 html5Mode 时有效。有a working plunker.

我刚刚使用了这些链接：

<a ui-sref="Support">
<a ui-sref="Support.view">

现在的状态 - 有效。

如果您启用了 html5Mode，则还必须配置您的服务器。但正如 this updated plunker 所示，即使启用了 html5Mode

，它又能正常工作了

$locationProvider.html5Mode({enabled: true});

检查版本

如何在多个视图中设置嵌套视图

How to set a Nested view inside a multiple views

angularjs

nested-views

angular-ui-router