Question

我有以下内容：

路线

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'时，它不显示右列和左列。

有人能指出我正确的方向吗？

Answer 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正在按预期工作

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

1 个答案: