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.

Take a look at http://stackoverflow.com/questions/27467170/angular-ui-router-update-url-without-view-refresh Not the exact same question but near enough — Simon H, Jan 09 '15 at 13:11
That link has some really great examples on it. Not exactly what I'm looking for, but still very useful. — Jack Slingerland, Jan 09 '15 at 13:18

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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)

Angular UI Router Nested Views Issue

1 Answers1

View Names - Relative vs. Absolute Names

Linked