CODEWITHSUNDEEP
ionic-framework
Edward Maxedon
Edward Maxedon

Reputation: 11

How do I set ion-sides-menus title to its child ion-view title?

I'm currently using Ionic version 1.2.4.

I have a parent view app which is an ion-side-menus directive. Currently, the ion-side-menu-content->ion-nav-bar has a title but its sub-views aren't changing the ion-nav-bar title.

Here's the app source:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable has-header" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>

        <h1 class="title">
          Default Title
        </h1>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/view1">
          View 1
        </ion-item>
        <ion-item menu-close href="#/app/view2">
          View 2
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And the app state is setup like:

$stateProvider.state('app', {
  url: '',
  abstract: true,
  template: '<app></app>'
});

The sub-view is properly being loaded into ion-nav-view, but it's view-title isn't updating the ion-nav-bar title.

Here's the source for view1:

<ion-view view-title="View 1">
  <ion-content>
  </ion-content>
</ion-view>

And the view1 state is setup like:

$stateProvider.state('app.view1', {
  url: '/view1'
});

I'm using angular component for the controller and templateUrl attributes.

How do I get the sub-view to update its parent view ion-nav-bar title when using ion-side-menus?

Upvotes: 0

Views: 820

Answers (1)

Edward Maxedon
Edward Maxedon

Reputation: 11

After a bit of tinkering this has been solved...

To make this work I modified the app template source where the ion-nav-view was and added the name attribute: <ion-nav-view name="appContent"></ion-nav-view>

And in the child views I modified the state to look like:

$stateProvider.state('app.view1', {
  url: '/view1',
  views: {
    'appContent': {
      templateUrl: `path/to/view1.html`
    }
  }
});

Inside the view1 template source I added the ion-nav-title directive like so:

<ion-view>
  <ion-nav-title>View 1</ion-nav-title>
  <ion-content class="padding">
    <p>View 1</p>
  </ion-content>
</ion-view>

Now child views ion-nav-title change the nav bar title respectively.

Upvotes: 1

Related Questions