Nested views without nested states

StackOverflow https://stackoverflow.com/questions/23138859

Question

Following this tutorial: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views, i'm able to create an application with multiple views defined in a root template. I need to modify that scheme a bit by putting tabledata and graph to a child view called content. I want my views to look like that:

index.html

<body>
  <div ui-view="header"></div>
  <div ui-view="content"></div>
</body>

content.html

<div ui-view="tabledata"></div>
<div ui-view="graph"></div>

And my routes looks like that:

# ...

.state('videos',
  url:         '/videos'
  templateUrl: 'content.html'
  views:
    'tabledata':
      templateUrl: 'tabledata.html'
      controller:  '...'

    'sidebar':
      templateUrl: 'graph.html'
      controller:  '...'
)

However, when pointing my browser to /videos, tabledata.html and graph.html templates are not loaded to corresponding views. Everything works great though, if i'll put tabledata and graph views to index.html

I'm sure there is something really wrong with my code but i'm not able to figure out what exactly nor google anything up.

Était-ce utile?

La solution

As far as I'm aware you can only have multiple ui-view's in multiple named views, i.e.when you explicitly declare a views property on your state definition. I'm not entirely sure what you're after, but if you would like to have control over where hese ui-views load their states then you can use an abstract state, from the link you provided:

Views override state's template properties

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

This is what I suggest:

.state('videos',{
  url:         '/videos',
  templateUrl: 'content.html',
  abstract: true})
.state('videos.xyz',{
  url: '/xyz',//you can leave this empty if you like
  {
    views:{
    'tabledata':{
      templateUrl: 'tabledata.html'
      controller:  '...'
      },

    'sidebar':{
      templateUrl: 'graph.html'
      controller:  '...'
     }
  }
 })

If you don't want that xyz appended to your url's, just pass in an empty string for the url property of the state videos.xyz. I use this approach all the time, let me know if it's what you're after.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top