How to change only child ui-view while keeping parent as same in ui-router angularjs?

Question

I have a ui-view inside index.html.

Inside this ui-view, i have added child ui-view="child1" which is working fine using $stateProvider state with nested views. Now on tab switch i want to change only child ui-view which is named "child1", but keeping parent ui-view as same (as i am on same page, just part of page is changing).

Is there any way we can achieve using routes? I also want to change url parameter so that on refresh I know which tab was open, so that i can open same tab using routes.

$stateProvider
    .state('main', {
      url: '/',
      views: {
        '': {
          templateUrl: 'assets/views/main.html',
          controller: 'mainInitCtrl',
        },
       'child1': {
          templateUrl: 'assets/views/child1.html',
          controller: 'childInitCtrl',
        }
      }
    });

Give both views a name – theaccordance May 16 '16 at 15:09 — theaccordance, May 16 '16 at 15:09

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

You should try to use not only nested views, but also nested states. So each tab will trigger child state. That way, parents view (unnamed) will stay unchanged all time, while child views will be changing with each tab click

// parent state main
.state('main', {
  url: '/',
  views: {
    '': {
      templateUrl: 'assets/views/main.html',
      controller: 'mainInitCtrl',
    },
  }
});
// select a tab1 and go to main.tab1 state
// parent view will stay, and "child1" view in index.html 
// will be replaced with content below
.state('main.tab1', {
  url: '/tab1',
   'child1@': {
      ...
    }
  }
})
// another tab
.state('main.tab2', {
  url: '/tab2',
   'child1@': {
      ...
    }
  }
})

similar Q & A with working plunker

Angular ui-router... Display default tab

But in case, that we want to have ui-view="child1" to be inside of the unnamed ui-view - we just have to move into parent 'main' state template

assets/views/main.html:

<div>
  main content
  ...
  <div ui-view="child1"></div>
</div>

This make more sense, and will fit to most scenarios. But child states definition now have to target parent 'main' not index.html, like this:

.state('main.tab1', {
  url: '/tab1',
   //'child1@': {
   'child1': {
      ...
    }
  }
})
// another tab
.state('main.tab2', {
  url: '/tab2',
   //'child1@': {
   'child1': {
      ...
    }
  }
})

Can you please provide some detailed explanation or jsfiddle if possible? How do i call change section on tab switch? do i need to keep name of views same like 'child1@'? Do i need to change url by \tab1 and \tab2 or somehow call state change? Sorry i am new to ui-router. Seems like what you mentioned i need exactly same but not able to understand it properly. — Mitesh Sharma, May 16 '16 at 15:21
Yes, there is an example plunker enclosed already. And in this Q & A you can find even another one, properly working and showing the power of UI-Router and tabs http://stackoverflow.com/a/29491412/1679310 — Radim Köhler, May 16 '16 at 15:26

How to change only child ui-view while keeping parent as same in ui-router angularjs?

1 Answers1