current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 2 down vote favorite

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.

share|improve this question
1  
Take a look at stackoverflow.com/questions/27467170/… Not the exact same question but near enough – Simon H Jan 9 '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 9 '15 at 13:18
up vote 1 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.