Angular UI Router - Named Nested Views Not Working

Question

I have the following:

Routes

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 -->

But when I transitionTo 'dashboard.recruiter', it doesn't display both the right and left columns.

Can anyone point me in the right direction?

Radim Köhler Radim Köhler · Accepted Answer · 2014-09-23T17:11:21

I created working example, which shows all your setting in action. Not really sure which part of the code to show here, because it is working as it is, as you did it. I just used some templates instead of 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'
          }
       }
  })

With some css we can see that this is working as expected

Angular UI Router - Named Nested Views Not Working

1 Answers