Angular ui-router with multiple views not being displayed

Question

I have the following state declared:

.state('select', {
    url: '/select/:youtubeId',
    views: {
        '': {templateUrl: 'partials/select/select.html'},
        video: {
            templateUrl: 'partials/select/select.video.html',
            controller: 'RecordVideoController'
        },
        setParts: {
            templateUrl: 'partials/select/select.set-parts.html',
            controller: 'RecordPartsController'
        },
        listParts: {
            templateUrl: 'partials/select/select.list-parts.html',
            controller: 'RecordPartsController'
        }
    }
})

All template files exist, this is for example, partials/select/select.html:

<div>
  <div class="row">
    <div ui-view="video" class="col-sm-9"></div>
    <div class="col-md-3 text-center">
      <div class="row">
        <div ng-class="{'col-md-12': parts.length == 0, 'col-md-6': parts.length !== 0}" ui-view="setParts"></div>
        <div ng-show="parts.length" ui-view="listParts" class="col-md-6"></div>
      </div>
    </div>
  </div>
  <div ui-view="ui-view"></div>
</div>

So, as it can be seen it only define the layout in order to set the proper state views.

Them problem is that none of the other views is being rendered, neither the corresponding controllers is being instantiated.

How is it supposed to work?

score 1 · Answer 1 · answered Nov 05 '15 at 00:23

I don't think you're nesting your views correctly. It's been a while since I worked with ui-router, but I think your nested states should look something like video@select: { templateUrl: 'partials/select/select.video.html', controller: 'RecordVideoController' },

Also, I'm not sure what you're trying to do with the <div ui-view="ui-view"></div> line - I think that can just be <div ui-view></div> if you're trying to render the default view there, or you need to specify which view you want as you did above.

score 1 · Accepted Answer · edited May 23 '17 at 12:29

can you provide total code , then i can check your states declared correct or no i am also thinking that your not using nested states correctly [enter link description here][1] check below link

Angular ui router multiple named views for all states

 .state('select', {
  url: '/select/:youtubeId',
  views: {
    '': {templateUrl: 'partials/select/select.html'},
    //viewName@stateName
    'video@select': {
        templateUrl: 'partials/select/select.video.html',
        controller: 'RecordVideoController'
    },
    'setParts@select': {
        templateUrl: 'partials/select/select.set-parts.html',
        controller: 'RecordPartsController'
    },
    'listParts@select': {
        templateUrl: 'partials/select/select.list-parts.html',
        controller: 'RecordPartsController'
    }
  }
})

try like this ..

Thanks, that made it work, so why not setting absolute view names won't make it work??? — diegoaguilar, Nov 05 '15 at 15:17

Angular ui-router with multiple views not being displayed

2 Answers2