Show side menu or back button conditionally

ionic-v1
1

Hi,

I’m developing an ionic app with a settings page. This settings page can be accessed from:

-Login page when the user is not logged (login.index state).
-Side menu when the user is logged (site.xxx state, the site menu is defined in the ‘site’ state).

If the user accesses the settings page from the login page, he should see a back button to go back to login. If the user accesses it from side menu, he should see the side menu icon.

I tried to implement it using two different states: login.settings and site.settings. The problem is that with this solution I cannot create child elements from settings, since I don’t know if the state root is ‘login’ or ‘site’.

So now I’m trying to show the side menu icon or the back button depending on a scope variable called showBackButton, but I can’t make it work. I tried using

$ionicSideMenuDelegate.canDragContent(!showBackButton);
or
ng-hide=“showBackButton” on <ion-side-menus>

but the side menu icon doesn’t disappear.

Anybody knows the easiest way to implement this behaviour?

Thank you!

1 Like
2

You can use enable-menu-with-back-views to hide the menu icon when the back button is there:

<ion-side-menu side="left" enable-menu-with-back-views="false">

Just make sure your menu icon has the menu-toggle directive on it:

<button class="button button-clear" menu-toggle="left"><i class="icon ion-navicon"></i></button>

If you want to dynamically show an icon based on scope, you can use $root like this:

<button class="button button-clear" menu-toggle="left" ng-show="$root.showMenuIcon"><i class="icon ion-navicon"></i></button>

Then in your menu controller declare when you want to show the menu icon (you can move this elsewhere, but just an idea)

$scope.$on('$ionicView.beforeEnter', function (e, data) {
    if (data.enableBack) {
        $scope.$root.showMenuIcon = true;
    } else {
        $scope.$root.showMenuIcon = false;
    }
});

However, if you’re using the menu-close directive on the items in the sidemenu, it should set that state as the root of the navigation when you click on it. If you throw your code in a codepen I can see what you’re trying to do better.

7 Likes
3

Hi brandyshea,

thank you for your answer. With the code you provided I’m able to hide the side menu icon, but I can’t find the way to show the back button unless I implement one by myself, and I’d like to avoid those kind of “hacks”. Also, the user can open the side menu by dragging, even when I’m using:

$ionicSideMenuDelegate.canDragContent(false);

Here’s a link to a demo of the app we’re building:

http://dpaloucva.github.io/moodle-mobile-ionic-prototype/www/

As you’ll see, in the login page there’s a gear icon on the top left to access the app settings. If you access the settings from here, you shouldn’t see the side menu, you should see a back button (right now, nothing’s shown). Please notice that the user can open the side menu by dragging, I don’t want that either.

After login into the app (you can enter the values you want, there’s no validation on site, username or password) you’ll see the side menu on the left side. Inside that side menu, at the bottom, you can access the “App settings” too. If you access the settings from here, you should see the side menu and not the back button.

You can see the source code in here:

You should look at:

  • js/app.js: Where the states are defined. The login pages states are the ones starting with “login”. All the pages once you are logged in are on the state “site”. The app settings page is the “site.settings” state.
  • js/settings.js: The controller of the settings page.
  • tpl/site.html: Where the side menu is defined.
  • tpl/site-settings.html: Where the settings page is defined.

Sorry to bother you, I’m new to ionic and I’m a bit lost :smile: .

Tanks again for your help!

4

I have done same thing with simple attributes on ion-view as per below.

if value of hideBackButton = true it will display slide menu button else back button.

6

I honestly don’t know a way to show the navigation back button when it isn’t showing at all. The only thing I can think is implementing a custom back button with window.history.back. I believe this is happening because you are navigating to the sidemenu from a non-sidemenu state and the sidemenu has it’s own history.

I guess you could put the login views inside of the sidemenu and disable the menu for those pages so that you could get the back button. Maybe someone has a better way. Sorry.

I think this is related:

7

Hi @brandyshea,

is this also possible to Ionic 2?

Thanks,
Daniel

1 Like
8

Any one know how to do this with Ionic2?

(Conditionally display the menu toggle button)

9 
<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
10

Why is this Magic word not mentioned in your docs?:scream:

1 Like