Angular UI 路由器 - 命名嵌套视图不起作用答案

【问题标题】：Angular UI Router - Named Nested Views Not WorkingAngular UI 路由器 - 命名嵌套视图不起作用
【发布时间】：2014-11-17 21:59:42
【问题描述】：

我有以下：

路线

function Config($stateProvider, $urlRouterProvider, USER_ROLES) {
    $stateProvider
        .state('dashboard', {
            url: '/dashboard',
            views: {
                'header@': {
                    templateUrl: 'partials/layout/sections/auth/header.html'
                },
                'content@': {
                     templateUrl: 'partials/dashboard/template.html'
                },
                'centre-column@dashboard': {
                     templateUrl: 'partials/dashboard/content.html'
                 },
                 'left-column@dashboard': {
                     templateUrl : 'partials/dashboard/left-column.html',
                     controller  : 'DashNavCtrl'
                  }
              },
          layoutType: 'three-column'
      })
      .state('dashboard.recruiter', {
          views: {
              'right-column@dashboard': {
                  templateUrl : 'partials/dashboard/recruiter/right-column.html',
                  controller  : 'DashSidebarCtrl'
              }
           }
      })

template.html

<!-- page-container -->
<div class="page-container">

<!-- main-container -->
<main class="main-container pad-e-2x" role="main" ui-view="centre-column">

</main>
<!-- /main-container -->

<div ui-view="left-column"></div>

<div ui-view="right-column"></div>

</div>
<!-- page-container -->

但是当我转换到“dashboard.recruiter”时，它不会同时显示左右列。

谁能指出我正确的方向？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

我创建了working example，它显示了您的所有设置。不太确定要在此处显示代码的哪一部分，因为它按原样工作，就像您所做的那样。我只是使用了一些模板而不是 templateUrl

$stateProvider
    .state('dashboard', {
        url: '/dashboard',
        views: {
            'header@': {
                templateUrl: 'header.html',
            },
            'content@': {
                 templateUrl: 'template.html'
            },
            'centre-column@dashboard': {
                 template: '<div class="layout center"><h3>center</h3></div>',
             },
             'left-column@dashboard': {
                 template: '<div class="layout left"><h3>left</h3></div>',
                 controller  : 'DashNavCtrl'
              }
          },
      layoutType: 'three-column'
  })
  .state('dashboard.recruiter', {
      views: {
          'right-column@dashboard': {
              template: '<div class="layout right"><h3>right</h3></div>',
              controller  : 'DashSidebarCtrl'
          }
       }
  })

通过一些 css 我们可以看到 this 正在按预期工作

【讨论】：