Hide navbar button when back button is present

ionic-v1
1

Hello guys !

I have a “home” button in my navbar, that I want to hide whenever the back button is present - like the menu button hides itself when using ionic’s side menu. Didn’t find howto.

Thanks !

2

Could you give some code sample?

3

Sure :

<ion-nav-bar>
   <ion-nav-back-button>
   </ion-nav-back-button>
   <ion-nav-buttons side="left">
      <button ui-sref="home" class="button button-icon button-clear ion-home">
      </button>
   </ion-nav-buttons>
</ion-nav-bar>
4

Code pen ! Please with html and js :stuck_out_tongue:

5

Simply hit scientific facts to see both icons side by side.

6

and you want to hide

< Home?

7

like this?

8

Hey, thanks for trying. No, like this you hide the back button. I want it to be visible, but when it is, the home button disappears.

9

Well you created the home button in the ion nav buttons component. But I don’t understand why do you need a home button if you already have the back button. Can’t you delete the home button and leave the back button which does the same thing ( leads you back at the home page) ? Just askin’ :smile:

10

There is an issue in the tab system : https://github.com/driftyco/ionic/issues/2997

Whenever you come from a page which doesn’t have tabs to a page that does have tabs, there is no back button - thus no way to return to the home page, in my case.

11

Oh i haven’t seen this issue :smile: So you might use only tabs or no tabs at all.

12

Something like that. And since I do want to use tabs AND have to set a home page that isn’t linked to it, looking for a solution :blush:

13

Have you already tried the “state.go” method?

14

To transition between the home page and the tabbed interface ? Yes.

15

Did it ! Here is the solution in case anyone needs it :

.directive('homeButton', function() {
    return {
        restrict: 'A',
        link: function($scope, $element) {
            $scope.$on('$ionicView.beforeEnter', function(ev, viewData) {
                if (viewData.enableBack)
                    $element.addClass('hide');
                else
                    $element.removeClass('hide');
            });
        }
    };
});

And add home-button to the element. Thanks @simo94 and @Endiss for trying to help.

3 Likes
16

Oh ok. That seems logical. Easy css :smiley: