ui-router child view being multiple named views or unnamed views

Question

How to configure in ui-router a parent/children relationship where siblings coexist in parent page? I can't make child state multiple named views working.

This is my parent page:parent.html:

<div> I have two child pages: 
  child page1 detail: <ui-view /> and 
  child page2 detail:<ui-view />.  
  I need both pages
</div>

I don't know how to or if I should use multiple-named views since multiple named views seem parallel and separable rather than wrapped around by other text like in the code above.

My ui router config:

 $stateProvider
  .state('parent', {
    url: '/parent',
    templateUrl: 'parent.html'

  })
  .state('parent.children', {
    url: '/children',
    views: {
      'child1': {
        templateUrl: 'child1.html'
      },
      'child2': {
        templateUrl: 'child2.html'
      }
    }
  });

The unnamed ui-view only allows one child to be plugged in.

See code in Plunker

score 0 · Accepted Answer · answered Mar 30 '17 at 20:33

0

The <ui-view>s in your example are incorrect. It's not a self-closing tag and when ui-view is used as the element instead of an attribute directive you need a name attribute to use named views. If you change your parent.html to the following it should work.

<div> I have two child pages: 
  child page1 detail: <ui-view name="child1"></ui-view> and 
  child page2 detail:<ui-view name="child2"></ui-view>.  
  I need both pages
</div>

answered Mar 30 '17 at 20:33

Lex

6,758
2
27
42

Than you, Lex! It works now. I wanted to vote for your answer but I am not eligible. – joehuangathome Mar 30 '17 at 21:26
Glad it helped! You should be able to accept it so it will show on the main list as answered if you'd like. – Lex Mar 30 '17 at 21:29

ui-router child view being multiple named views or unnamed views

1 Answers1