Question

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

1）用户进入选项卡



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



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



4）如果用户返回第一个选项卡，他们将进入选项卡的父视图。我怎样才能让他们回到该标签的子视图（见＃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>

我已在此codepen进行了一些小更新，现在显示其当前状态。

Answer 1

我认为你只需要修复你的状态。例如：

'sidemenu.parent.grandchild1'

应该是：

'sidemenu.parent.child1.grandchild1'

您必须更改链接并在模板中添加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>

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

1 个答案: