如何在返回时保持其嵌套子状态，而不是使用ui-router转到其父级？

Im created tabs using ui-router where some of tabs have children/grandchildren states. How can I have tab view remember its history, that is, go back into its previous used state upon return. I created a CODEPEN to demonstrate this.

我使用ui-router创建了标签,其中一些标签有子/孙子状态。我怎样才能让标签视图记住它的历史记录,也就是说,在返回时返回其先前使用的状态。我创建了一个CODEPEN来证明这一点。

1) users goes into a tab

1)用户进入选项卡

2) user goes into a nested view of that tab

2)用户进入该选项卡的嵌套视图

3) user goes into another tabs view

3)用户进入另一个标签视图

4) if the user goes back into the first tab they go into the parent view of the tab. How can I have them go back into the child view of that tab (seen in #2)?

4)如果用户返回第一个选项卡,他们将进入选项卡的父视图。我怎样才能让他们回到该标签的子视图(见#2)?

    .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 have made a minor updates in this codepen where it now shows its current state.

我在这个codepen中进行了一些小的更新,它现在显示了它的当前状态。

1 个解决方案

#1

I think you just have to fix your states. For example:

我想你只需要修复你的状态。例如:

'sidemenu.parent.grandchild1'

should be:

'sidemenu.parent.child1.grandchild1'

And you'll have to change the link and add a ui-view in your template:

您必须更改链接并在模板中添加ui-view:

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

#1