Nav-bar button overlaps

ionic-v1
1

Good Morning guys,

I have a question, I have the main bar created like this:

<ion-nav-bar ng-controller="AppCtrl">
      <ion-nav-back-button>
            {{'back_button'| translate}}
        </ion-nav-back-button>
        <ion-nav-title ng-click="mainRouter()">
          <div class="page-title">{{title}}</div>
          <div class="page-sub-title">{{date}}</div>
        </ion-nav-title>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>

      <ion-nav-buttons side="right">
        <button ui-sref="app.settings" class="button icon ion-ios-information-outline"></button>
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

The cuestion is… when I go to another view that has for example another right button it overwrites it, its possible to maintain the two buttons?

<ion-view>
  <ion-nav-buttons side="right" >
    <button class="button ion-plus" ui-sref='app.new'> </button>
  </ion-nav-buttons>
....
2

Can’t you do this in the other view?

<ion-view>
  <ion-nav-buttons side="right">
    <button class="button ion-plus" ui-sref='app.new'>
    </button>

    <button ui-sref="app.settings" class="button icon ion-ios-information-outline">
    </button>
  </ion-nav-buttons>
</ion-view>
3

no because the plus button is specific in that view and only appears there.

4

I think either I misunderstood you or you misunderstood me. By including those two buttons ONLY in the specific view as you wanted they won’t appear anywhere else. Alternatively, you can apply ng-hide/ng-show on a button if the user is in the specific view.

5

how do you say not no show in a specific view?

6

Are you using ui-router?

If yes, it is pretty simple. You can get the url of a view with $state.$current.name and then you can apply it in your template with attribute ng-hide="hideInView()" and define the function in your controller as

$sccope.hideInView = function() {
    if ($state.$current.name === "your.state") return true; else return false;
}
7

Thank you very much!

8

I actually have a typo there, should be $state.$current.name! Updating it now sorry

9

I stay corrected. You can use either of those. Here’s a little discussion on that if you’re interested https://github.com/angular-ui/ui-router/issues/176