Angular UI Router Nested Views Issue

Question

I'm having some issues grokking how Angular UI Router nested views work.

My $stateProvider looks like this:

$stateProvider
.state('login', {
  url: "/login",
  views: {
    'main': {
        templateUrl: "static/templates/login.html",
        controller: 'LoginCtrl'
    }
  }
})
.state('dashboard', {
    url: "/dashboard",
    controller: 'DashboardCtrl',
    views: {
        'main': {
            templateUrl: "static/templates/dashboard.html",
        },
        'content' : {
            templateUrl: 'static/templates/partials/dashboard-content.html',
            controller: 'DashboardContentCtrl'
        }
    }
});

My goal here is to load in the 'dashboard.html' template dynamically (this works). But after that, populate the 'content' ui-view with 'dashboard-content.html'.

dashboard.html

<div class="span3">
   <!-- A bunch of plain html -->
</div>
<div class="span9" ui-view='content'></div>

My index file (that loads the whole app) has a ui-view named "main", which seems to be working fine. I need this to work because 'dashboard-content.html' contains menu items that will need to be available across the logged in site. Only items in the 'content' ui-view will be changing significantly. Anything else will just have something simple like an 'active' class applied to a link.

Answer 1

Just use absolute naming in the second view def:

// instead fo this
// 'content' : {
// use this
'content@dashboard' : {
    templateUrl: 'static/templates/partials/dashboard-content.html',
    controller: 'DashboardContentCtrl'
}

The doc reference (and a small cite from it):

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

You can also check this for more explanation and working plunker

• Angular UI Router - Nested States with multiple layouts
• ui router - nested views with shared controller (for some details about nesting)