Common footer paragraph directive rather than ion-footer-bar

1

Hi Mr. Genius,

I have a common footer content which will be rendered in all the pages, do you guys have any idea which ion tag should I use?

it seems ion-pane and ion-content will cover the whole page, rather than only a part of the page.

Please check my codes below:

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      //nav bar goes here
    </ion-nav-bar>

    <ion-nav-view name="menuContent" animation="slide-left-right">
       <ion-view>
        <ion-content class="has-header">
          //different content in different pages
        </ion-content>
      </ion-view>
    </ion-nav-view>

    <ion-content>
         //common footer conten goes here
    </ion-content>
  </ion-pane>

  <ion-side-menu side="left">
    //menus list goes here
  </ion-side-menu>

</ion-side-menus>
2

If you need footer, you can use an ion-footer-bar

  <ion-side-menus>
    
    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
        </button>
      </ion-nav-buttons>
      <ion-nav-view name="menuContent"></ion-nav-view>
      
      <ion-footer-bar class="bar-calm">
        
      </ion-footer-bar>
    </ion-side-menu-content> 
    
    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <a href="#/event/check-in" class="item" menu-close>Check-in</a>
          <a href="#/event/attendees" class="item" menu-close>Attendees</a>
        </ul>
      </ion-content>
    </ion-side-menu>
    
  </ion-side-menus>
3

Thanks for your reply, but ion-footer-bar is not what I want because it is positioned absolute on the view.

4

Resolved!!
I put <ion-content> to menu.html and use <div class="row"> to load the html content in sub-pages.

menu.html

<ion-side-menus>    
  <ion-pane ion-side-menu-content>    
    <ion-nav-bar class="bar-stable">
      // nav buttons goes here
    </ion-nav-bar>

    <ion-view>
      <ion-content class="has-header">    
        <ion-nav-view name="menuContent" animation="slide-left-right">
           // to load content page
        </ion-nav-view>

        <div class="row">
          This is a block of the common footer part.
        </div>    
      </ion-content>
    </ion-view>    
  </ion-pane>

  <ion-side-menu side="left">
    //menu list goes here
  </ion-side-menu>    
</ion-side-menus>

pages.html

<div class="row">
  {{page.htmlContent}}
</div>
5

You can also use ng-include to include the same html snippet into multiple places, makes it easier to update instead of having to change everywhere.

6

Glad to know this, I need do more study on AngularJS.