UI yönlendiricisini kullanarak ana sayfasına gitmenin tersi olarak dönüşte yuvalanmış alt durumu nasıl koruyabilirim?

Question

Bazı sekmelerin çocuk/torun durumlarına sahip olduğu ui yönlendiriciyi kullanarak sekmeler oluşturdum. Sekme görünümünü geçmişini hatırlayabiliyorum, yani geri döndüğünde önceki kullanılan durumuna geri dönebilirim. Bunu göstermek için bir CODEPEN oluşturdum.

1) kullanıcıların bir sekme girer

2) kullanıcı

3) kullanıcı başka sekmeler görünümüne gider sekmenin yuvalanmış görünümüne girer

) Kullanıcı ilk sekmeye geri dönerse, sekmenin üst görünümüne giderler. Onları bu sekmenin alt görünümüne nasıl geri götürebilirim (# 2'de görülür)?

JS Ben şimdi bugünkü durumunu gösteren bu codepen küçük bir güncelleme yaptık

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

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

Answer 1

Sadece eyaletlerinizi düzeltmeniz gerektiğini düşünüyorum. Örneğin:

'sidemenu.parent.child1.grandchild1' 

Ve bağlantıyı değiştirmek zorunda ve şablonunda bir ui-view ekleyeceğiz:

'sidemenu.parent.grandchild1' 

olmalıdır

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