Using a common ion-nav-bar across all the routes

ionic-v1
1

Hi,

I am trying to create a multi route application where i have a common nav bar, which gets updated based on the view title.

Primarily i have two routes - /#/poll/list and /#/poll/show/1

/#/poll/list - Has a slide menu with one slide-menu-content( for the center content) and one slide-menu-left.

/#/poll/show/1 - Is a normal page

Catch - slide-menu-content(center) and the show page( /#/poll/show/1) have a common nav-bar( The have a common parent nav-view ).

Problem - When i load the url /#/poll/list, slide-menu-content’s title get’s replaced with the title of slide-menu-left( Perhaps because content of slide-menu-content loads from external template).

To work around this, i added a separate nav-bar to slide-menu-left, which fixes this issue but introduces another issue - Now when i toggle left, title doesn’t change, it takes the title of slide-menu-content( perhaps because their are different nav-bar’s and toggling doesn’t switch the nav-bar).

I am not sure how to fix this, any help would be appreciated. Adding the html for reference.

<!-- parent view's html -->
    <nav-bar class="nav-title-slide-ios7 bar-positive">
          <nav-back-button class="button-icon ion-arrow-left-c">
          </nav-back-button>
    </nav-bar>
    <ion-nav-view></ion-nav-view>
    
    <!--  end of parent -->
    
    <!-- slide-menu's html -->
    <ion-side-menus>
      <ion-side-menu-content drag-content = "true">
      <ion-nav-view name= 'poll-list' animation = 'slide-left-right'>
        </ion-nav-view>
      </ion-side-menu-content>
        <ion-side-menu side="left">
          <ion-nav-bar class="bar-assertive" delegate-handle = "category"> 
          </ion-nav-bar>
            <ion-view title = "Categories">
              <ion-content>
                    <ion-list>
                  
                    </ion-list>
              </ion-content>
           </ion-view>
        </ion-side-menu>
        

</ion-side-menus>

<!-- show page -->
<ion-view  title = 'Do you like peanut butter ?'>

	 <ion-content>
	    
	</ion-content>
      
</ion-view>

<!-- slide-menu-content ( centre ) html -->
<ion-view  title = 'Latest Polls'>

    <ion-nav-buttons side="left">
     <button class = "button button-icon" ng-click = "toggleCategories()">
          <i class = "icon ion-navicon"></i>
      </button>
    </ion-nav-buttons>

  <ion-content>
    <ion-list>

    </ion-list>
</ion-content>
      
    </ion-view>
2

Try this kind of layout. This issue is two-fold, you were using an old syntax of the nav-bar and you had a nav-bar in the slide-menu. You should have a header in the side menu and then the nav-bar in the side-menu-content

<ion-nav-view></ion-nav-view>
<!--  end of parent -->

<!-- slide-menu's html -->
<ion-side-menus>
  <ion-side-menu-content drag-content = "true">
 <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
<ion-/nav-bar>
  <ion-nav-view name= 'poll-list' animation = 'slide-left-right'>
    </ion-nav-view>
  </ion-side-menu-content>
    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive" delegate-handle = "category"> 
      </ion-header-bar>
        <ion-view title = "Categories">
          <ion-content>
                <ion-list>
                </ion-list>
          </ion-content>
       </ion-view>
    </ion-side-menu>
3

Thanks for the prompt reply,

I had tried what you suggested, but i faced the same issue, however just to make it clear what the problem is, i have created a codepen http://codepen.io/vjunloc/pen/ztsHE

What i want is that the title of side-menu-content should be seen on the page load and as we toggle left menu should become visible and title should be updated accordingly.