History is confused 2 nav-view in one html template

1

Hello !

I’m trying to have the following scenario :

  1. Show a post
  2. Click to see comments
  3. page to add comment

This is what I have done:

For URLs:

    ...
     .state('comments', { 
// This was supposed to be abstract but with the black screen bug at transition, I removed the abstract state.
        url: '/comments',
        templateUrl: 'templates/comments/comments.html'
      })
    
      .state('comments.list', {
        url: '/:PostId',
        views: {
          'comments-list': {
            templateUrl: 'templates/comments/comments-list.html',
            controller: 'CommentsCtrl'
          }
        }
      })
    
      .state('comments.add-comment', {
              url: '/add-comment/:PostId',
              views: {
                  'add-comment': {
                      templateUrl: 'templates/comments/add-comment.html',
                      controller: 'CommentsCtrl'
                  }
              }
          });

Comments.html

<ion-nav-view name="comments-list"></ion-nav-view>
<ion-nav-view name="add-comment"></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

    <!-- Dashboard Tab -->
    <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="home">
    </ion-tab>

</ion-tabs>

This works fine, but when I go to ‘comments.add-comment’ state, and tap back, only the header goes back and changes, not the body.

Is it wrong to have 2 <ion-nav-view> in one html file ?
Thanks a lot

2

I solved the problem :

I removed the views from the states because I’m not using tabs transitions:

.state('comments', {
    url: '/comments',
    templateUrl: 'templates/comments/comments.html'
  })

  .state('comments.list', {
    url: '/:PostId',
    templateUrl: 'templates/comments/comments-list.html',
    controller: 'CommentsCtrl'
  })

  .state('comments.add-comment', {
    url: '/add-comment/:PostId',
    templateUrl: 'templates/comments/add-comment.html',
    controller: 'CommentsCtrl'
  });

and Comments.html became like this :

<ion-nav-view></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

    <!-- Dashboard Tab -->
    <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="home">
    </ion-tab>

</ion-tabs>
3

Hi Sshuicchi,
Can you help me to do comment box in my app for each articles?