CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
diegoaguilar
diegoaguilar

Reputation: 8376

Angular ui-router with multiple views not being displayed

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?

Upvotes: 0

Views: 64

Answers (2)

roshini
roshini

Reputation: 112

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

Upvotes: 1

Andrew Cavanagh
Andrew Cavanagh

Reputation: 277

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.

Upvotes: 1

Related Questions