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?

Community · Accepted Answer · 2017-05-23 12:29:51Z

1

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 ..

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Nov 5, 2015 at 1:55

roshini

1127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

diegoaguilar Over a year ago

Thanks, that made it work, so why not setting absolute view names won't make it work???

Andrew Cavanagh · Accepted Answer · 2015-11-05 00:23:50Z

1

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.

answered Nov 5, 2015 at 0:23

Andrew Cavanagh

2772 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular ui-router with multiple views not being displayed

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related