2

Below is the template code to a page in my app. You can see that I am using the ion-nav-bar. I would like to disable the ion-nav-bar on the login screen and to not have a back button to go back to the login screen.

The best solution I can come up with is to remove <ion-nav-bar> from the login page and add an ng-show directive to <ion-nav-back-button> that tests if the previous page is login and hides the tag in that case.

Is there any better design pattern for this?

<ion-view view-title="Sales">
  <ion-pane>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
      <ion-content class="padding">

        <ionic-datepicker input-obj="datepickerObject">
          <button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
        </ionic-datepicker>

        <div class="list list-inset">
          <label class="item item-input">
            <input type="text" placeholder="Amount" ng-model="data.amount">
          </label>
        </div>

        <button class="button button-block button-stable" ng-click="enter()">Save</button>

      </ion-content>
    </ion-nav-bar>
  </ion-pane>
</ion-view>
user1283776
  • 19,640
  • 49
  • 136
  • 276

2 Answers2

4

To your ion-view, you need to add the hide-nav-bar directive and set it to true to hide it on this page. Like so

<ion-view hide-nav-bar="true">

This will hide the whole nav-bar when you enter the view

Jad Salhani
  • 480
  • 1
  • 3
  • 12
  • Thank you! That's half of my problem solved. Is it also possible to just hide the back button, on the first screen after having logged in? – user1283776 Nov 19 '15 at 09:48
  • Well if you're using the ion-nav-bar on the whole app (i.e. defining it in the body/index.html or whaterver) you're gonna have to add an ng-hide on ion-nav-back button with the state name of the page you want to hide the button on Something like < ng-hide="state.current.name = pageState" > If you add it per page, just remove it from the ion-nav-view in that page – Jad Salhani Nov 19 '15 at 10:02
  • It works fine but after hiding nav bar, a white space is appearing. How to remove that white space ? – Ayyaz Zafar Feb 14 '16 at 23:46
0

For hiding back button just add this tag to your view just like this

<ion-view title="Login" hide-back-button="true">

Patrick James Nengasca
  • 1