Conditionally hide the menu button in the ionic frame outside <ion-view>

Question

In the ionic structure, I try to hide the menu button conditionally. For other reasons, I had to split the menu on my own controller (I don’t want to completely override the menu and the title bar when updating), so the title is not in ion view mode. I created an observer on a condition variable (stateparam) in the header controller. The console log displays the condition variable correctly, but the view is not updated (the menu button is always displayed).

This is the template:

<ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="bar-stable nav-title-slide-ios7"> <ion-nav-back-button ng-if="!isHome" class="button-clear"><i class="icon ion-ios7-arrow-back"></i>Back</ion-nav-back-button> <button ng-if="isHome" menu-toggle="left" class="button button-icon icon ion-navicon"></button> <h1 class="title">Title</h1> </ion-nav-bar> <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> </ion-side-menu-content> ... </ion-side-menus> 

And in the controller:

 $scope.$watch(function(){ return $stateParams.contentUrl; }, function(newVal){ console.log(newVal); if(!newVal || newVal === 'someParam'){ $timeout(function(){ $scope.$apply(function(){ $scope.isHome = true; }); console.log("home"); }); } else { $timeout(function(){ $scope.$apply(function(){ $scope.isHome = false; }); console.log("not home"); }); } }); 

Is there an easier way? Or am I missing something here?

Answer 1

You can use the hide-back-button attribute in the <ion-view> element to declare that this view should hide the default back button.

http://ionicframework.com/docs/nightly/api/directive/ionView/

 <ion-view hide-back-button="true"> <!-- view contents --> </ion-view> 

Answer 2

Some kind of dirty workaround would be to give these buttons an identifier, and then use jqlite to hide them, like this in the controller:

 angular.element(document.querySelector('#back-button')).addClass('hidden'); 

Answer 3

Setting hide-back-button to false did not help me. However, in my case it was easier to have

 <ion-nav-buttons side="left"></ion-nav-buttons> 

inside the <ion-view> . It is easy to turn on the empty left navigation buttons. It did the trick for me.

Answer 4

This can be done in a simple way:

 <ion-side-menus enable-menu-with-back-views = "true"> 

and on specific pages where you want to hide the menu bar and navigation bar, say your login page (inside your login controller), just type in - don't forget to include these objects in the controller function.

 $scope.$on('$ionicView.beforeEnter', function (event) { $scope.$root.showMenuIcon = false; $ionicSideMenuDelegate.canDragContent(false); }); $scope.$on('$ionicView.beforeLeave', function (event) { $scope.$root.showMenuIcon = true; $ionicSideMenuDelegate.canDragContent(true); });