How can I have an idea to save my nested child state upon return, rather than go to its parent using ui-router?

Question

I created tabs using ui-router where some tabs have children / grandchildren. How can I view the tab, remember its history, that is, return to the previous used state after returning. I demonstrated this CODEPEN .

1) users go to the tab

2) the user goes to the subview of this tab

3) the user switches to another type of tabs

4) if the user returns to the first tab, they will go to the parent view of the tab. How can I return them to the child view of this tab (see No. 2)?

Js

.state('sidemenu.parent.child1', { url: "/child1", views: { 'shared-child-view' :{ templateUrl: "child1.html" } } }) .state('sidemenu.parent.child2', { url: "/child2", views: { 'shared-child-view': { templateUrl: "child2.html" } } }) .state('sidemenu.parent.grandchild1', { url: "/grandchild1", views: { 'shared-child-view': { templateUrl: "grandchild1.html" } } }) 

HTML

  <div class="tabs tabs-top button-bar"> <a class="tab-item" ng-class="{active:$state.includes('sidemenu.parent.child1') || $state.includes('sidemenu.parent.grandchild1')}" ui-sref="sidemenu.parent.child1"> <b> Child1</b> </a> <a class="tab-item" ng-class="{active:$state.includes('sidemenu.parent.child2')}" ui-sref="sidemenu.parent.child2"> <b>Child2</b> </a> ............... <div ui-view name="shared-child-view"></div> 

I made a small update in this codepen , where the current status is now displayed.

Answer 1

I think you just need to fix your condition. For instance:

 'sidemenu.parent.grandchild1' 

it should be:

 'sidemenu.parent.child1.grandchild1' 

And you will need to change the link and add ui-view to your template:

 <script id="child1.html" type="text/ng-template"> <div> <a class="button" ui-sref="sidemenu.parent.child1.grandchild1"> <b>go to grandchild</b> </a> <div ui-view name="shared-child-view"></div> </div> </script>