Angular.js UI-Router Children Scope

Question

I am using the ui-router library ( https://github.com/angular-ui/ui-router ) and I'm having a bit of confusion around nested views/routes.

Here is how I've configured the routes:

$stateProvider.state( 'networks', {
  url: '/networks',
  access: accessLevels.admin,
  abstract: true,
  controller: 'NetworksCtrl',
  templateUrl: 'networks/networks.tpl.html'
} )
  .state( 'networks.list', {
    url: '',
    access: accessLevels.admin,
    template: '<h4><i class="icon-chevron-sign-left icon-large"></i> Please select a network from the left</h4>'
  } )
  .state( 'networks.detail', {
    url: '/{networkId}',
    access: accessLevels.admin,
    controller: 'NetworkDetailCtrl',
    templateUrl: 'networks/networkDetail.tpl.html'
  } )
  .state( 'networks.detail.show', {
    url: '/show/{showCode}',
    access: accessLevels.admin,
    views: {
      '@': { // Override the main view, unfortunately this will break the scope so the network info will be requested again
        controller: 'NetworkShowCtrl',
        templateUrl: 'networks/networkShowDetail.tpl.html'
      }
    }
  });

When you access /networks you are presented with a list of networks on the left of the page (similar to the ui-router example here: http://angular-ui.github.io/ui-router/sample/#/contacts ). Clicking on one of the network names displays the details route on the right of the page, which contains a list of clickable shows .

However, the part that I'm confused about is what if I wanted the networks.detail.show page to actually exist on it's own full-page and maintain scope of the parent network.details ? The only way I was able to come up with getting around that is on the networks.detail.show route, where you can see I've overridden it to use the main view (which is killing the scope).

I feel like I'm looking at this the wrong way, so any advice would be greatly appreciated.

Thanks for your time,

-Ryan S.

Answer 1

You will either have to:

1. Add an additional abstract state at the top level that has a template of '<ui-view/> and also a controller with all the scope items you need. So you'd essentially be moving the important shared scope items be a part of this top level state instead of networks.details . Then set networks.details.show to populate this new state's view, eg "@newstate" .

2. Use a shared service to talk and maintain 'state' between the two state controllers. This may be the cleaner solution. Inject a service (eg "NetworksDetailsShowState") into both controllers and proxy the service's properties onto scope properties in both controllers and then change the service at will.