CODEWITHSUNDEEP
javascriptangularjsionic-framework
Bert Carremans
Bert Carremans

Reputation: 1733

Dynamically Show Home Button in Header Bar in Ionic

In my Ionic app I want to show a Back To Home button in the header bar on all pages except the Home page. I try to do this with a boolean that is set to false when the $state.current.name equals home.

In an ng-show directive I use this boolean to show or hide the home button. Unfortunately, the boolean is always set to true and therefore the button is also shown on the home page. How can I solve this?

My controller in app.js

.controller('mainController', function($scope, $state) {
    $scope.showHomeButton = true;

    if ($state.current.name == 'home') {
        $scope.showHomeButton = false;
    }
})

Extract from the index.html

<body ng-app="chartly" ng-controller="mainController">
  <ion-nav-bar class="bar-positive">
      <ion-nav-back-button class="button-clear">
          <i class="icon ion-ios-arrow-left"></i>
      </ion-nav-back-button>
      <ion-nav-buttons side="right" ng-show="showHomeButton">
          <a href="/#/home" class="button icon ion-home"></a>
      </ion-nav-buttons>
  </ion-nav-bar>
  <ion-nav-view>
  </ion-nav-view>

Upvotes: 0

Views: 1578

Answers (2)

Nijeesh
Nijeesh

Reputation: 847

Did you try using $location instead?

.controller('mainController', function($scope, $location) {
    if($location.path()!='#/home') {
        $scope.showHomeButton = true;
    }
})

Upvotes: 0

Walfrat
Walfrat

Reputation: 5353

Either add a watch : 

$scope.$watch(function(){
    return $state.current.name;
}, function(new){
    if (new === 'home') {
        $scope.showHomeButton = false;
    }
});

Or if this doesn't work listen for then event $stateChangeSuccess in your main controller

$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){ 
if (toState.name === 'home') {
        $scope.showHomeButton = false;
    }

}

Upvotes: 0

Related Questions