CODEWITHSUNDEEP
angularjsionic-framework
mwiegboldt
mwiegboldt

Reputation: 2760

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

In the ionic framework I am trying to hide the menu button conditionally. For other reasons I had to split the menu in its own controller (I don't want to completly re-render the menu and header bar on a refresh), so the header is not in ion-view. I created a watcher on the conditional variable (a stateparam) in the controller of the header. The console log outputs the conditional variable correctly, but the view is not updated (the menu button is always showing).

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?

Upvotes: 5

Views: 15281

Answers (4)

Abhishek Agarwalla
Abhishek Agarwalla

Reputation: 322

It can be done in a easy way:

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

and on the specific pages where you want to hide the Menu and nav bar, let say your Login Page(inside your login Controller), just type- don't forget to include specified objects inside 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);
});

Upvotes: 0

chank
chank

Reputation: 3636

Setting hide-back-button to false did not work for me. However, in my case the easier solution was to have 

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

inside <ion-view>. This is to just include a empty left side nav buttons. This did the trick for me.

Upvotes: 1

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

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

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

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

Upvotes: 7

mwiegboldt
mwiegboldt

Reputation: 2760

A kinda dirty workaround would be to give those buttons an id and then use jqlite to hide them like this in the controller:

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

Upvotes: 1

Related Questions