Menu
I need to show and hide back button in different pages/views. I took reference from Justin Noel:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
</body>
App controller to toggle button display:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$scope.hideBackButton = true;
else
$scope.hideBackButton = false;
})
But this doesnt work as controller is called only once but not at the change of view in different states. Also changing the value of $scope.hideBackButton from other controllers(linked to different states) does not have any effect on the button display.
Can anyone tell me how to toggle back-button display on each navigation. What am I missing here?
865
I had exactly same problem today.
Simplest solution is to use $ionicNavBarDelegate:
.controller('AppCtrl', function($scope, $location, $ionicNavBarDelegate) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$ionicNavBarDelegate.showBackButton(false);
else
$ionicNavBarDelegate.showBackButton(true);
})
You can also wrap hideBackButton value in object and your code will work:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
$scope.options = $scope.options || {};
if (path.indexOf('submit') != -1)
$scope.options.hideBackButton = true;
else
$scope.options.hideBackButton = false;
})
It works because in JS (as in many other languages) booleans are passed by value and object are passed by the referance and it affects how default Angular watchers are created. The downside of this method is that hidding of the button is not as smooth as in other ionic solutions.
Just in case, this is how your html should look like:
1st solution:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
</body>
2nd solution:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{options.hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
</body>
The hide-back-button attribute on <ion-view> did the trick for me: <ion-view hide-back-button="true">
See the official documentation here.
43
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.home');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
