How to remove the hamburger menu on some pages?


#1

How to remove the hamburger menu on some pages by using a property on the ion-view tag or controller?

I’m using the sidemenu sample app.


#2

It depends on your use case. You can use a $rootScope variable in the controller like this:

HTML:

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

Controller:

$scope.$on('$ionicView.beforeEnter', function (e, data) {        
  $rootScope.showMenu = true;
});

$scope.$on('$ionicView.beforeLeave', function (e, data) {        
  $rootScope.showMenu = false;
});

Or you could put it in the run function and assign a property to the state if you’re not set on determining it in the controller:

.run(function($rootScope, $state) {
  $rootScope.$on('$ionicView.beforeEnter', function (e, data) { 
    $rootScope.showMenu = false;
    
    if ($state.$current.showMenu == true) {
      $rootScope.showMenu = true;
    }
  });
})

State definition:

.state('page2', {
  url: "/page2",
  templateUrl: "templates/page2.html",
  controller: "Page2Ctrl",
  showMenu: true
})

Keep in mind the user will still be able to swipe to open the menu, if you want to remove this ability you will need to add $ionicSideMenuDelegate.canDragContent(false);

Here is a codepen with examples of the above, where the menu is only accessible on page 2: http://codepen.io/brandyshea/pen/XbMMbB?editors=101

Please let me know if this is what you meant. :smile:


#3

yes. that works great.

thank you


#4

The codepen uses both the module and the controller - are both required, or just one of them?
Also, would the markup look any different if one uses template files with ion-view (rather than a single html)?