Add view subheader to side menu navbar component

ionic-v1
1

I’m trying to figure out how to add a subheader to the navbar on a few pages, without doing it for all. Something such as this…

index.html

<div ng-controller="NavMenu">
<side-menus>
  <!-- Center content -->
  <pane side-menu-content id="nav-menu-pane">
    <nav-bar type="bar-positive"></nav-bar>

    <!-- subheader? -->
    <header ng-if="subTitle" class="bar bar-subheader">
      <h2 class="title">{{subTitle}}</h2>
    </header>

    <nav-view></nav-view>
  </pane>

  <!-- Left menu -->
  <side-menu side="left">
    ...
  </side-menu>
</side-menus>
</div>

View Controller -
In my view controller i set $scope.navTitle and $scope.subTitle (if needed)

.controller('SomeViewController', ['$scope',
    function($scope) {
      $scope.navTitle = 'My Header';
      $scope.subTitle = 'My Subheader'; // may be undefined
    }
  ])

View HTML-
In my view HTML i’m then able to store the title on the view which “magically” updates the <navbar> text. Question is, how do I do the same for the <header> sub title?

<view title="navTitle" hide-back-button="true">
  <content has-header="true" padding="true">
    ...
  </content>
</view>

Any help is greatly appreciated.

2

I’m guessing that your side menu is not actually inside the scope of your controller. You probably have this effective HTML after the state change and view is rendered.

<side-menus>
  <!-- Center content -->
  <pane side-menu-content id="nav-menu-pane">
    <nav-bar type="bar-positive"></nav-bar>

    <!-- subheader? -->
    <header ng-if="subTitle" class="bar bar-subheader">
      <h2 class="title">{{subTitle}}</h2>
    </header>

    <nav-view>

      // Your state probably puts the view HERE with the "SomeController"
      <view title="navTitle" hide-back-button="true">
        <content has-header="true" padding="true">
          ...
        </content>
      </view>

    </nav-view>
  </pane>

  <!-- Left menu -->
  <side-menu side="left">
    ...
  </side-menu>
</side-menus>

If that is the case, the $scope.subTitle is never bound to the HTML because it’s outside it’s outside the controller.

If so, you need two controllers. Maybe a “MainController” with a $scope.subTitle. Thanks to inheritance, “SomeController” can set the property $scope.subTitle and it will be updated in the subheader.

Try this. If it doesn’t work, put up a Codepen or JsBin demo:

<side-menus ng-controller="MainController">
  <!-- Center content -->
  <pane side-menu-content id="nav-menu-pane">
    <nav-bar type="bar-positive"></nav-bar>

    <!-- subheader? -->
    <header ng-if="subTitle" class="bar bar-subheader">
      <h2 class="title">{{subTitle}}</h2>
    </header>

    <nav-view></nav-view>
  </pane>

  <!-- Left menu -->
  <side-menu side="left">
    ...
  </side-menu>
</side-menus>
3

I updated my original example…as i do have a controller div around my side menu. i initialize $scope.subTitle in NavMenu controller and update it via $scope.subTitle in my child controller, but still doesn’t work

4

Example:
http://embed.plnkr.co/1MIEOn1Z6D7AoWbMMFil/preview

5

I apologize. I misunderstood something.

here is a working example. You don’t need that whole ng-if at all. Don’t define the subheader in the main view. Just do it in each individual view.

6

the plunk doesn’t work for me.

7

Try now. It was because I stupidly linked to the Ionic nightlies instead of a specific version.

1 Like
8

easy enough. thanks a lot!

9

Is the sample link still working? Not to me.