Hiding/Showing ion-view header based on button press

ionic-v1
1

Hi, I have an ion-view where I need to hide the ion-view header dynamicaly and enable it back if the user presses a button

I’ve tried the following

<ion-view title="Montage View" class="bar-stable" cache-view="false" hide-nav-bar="{{minimal}}">

Where minimal gets toggled when the user presses a button like so:

  <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"></button>

and in the controller:

$scope.minimal=false;
$scope.switchMinimal = function()
    {
        $scope.minimal = !$scope.minimal;
        console.log ("Hide Statusbar");
        ionic.Platform.fullScreen(true,false);
        
    };

This does not hide the nav-bar as when it is first loaded, minimal is false. I tried adding

$state.go($state.current, {}, {reload: true});

inside switchMinial() but that also resets the minimal flag. I also tried $state.refresh() - they both seem to re-initialize the controller

Any ideas?

2

Okay, I solved the problem by using state parameters that I pass to the state in .go

.state('montage', {
        url: "/montage",
        templateUrl: "templates/montage.html",
        controller: 'zmApp.MontageCtrl',
        params: {minimal:false}

    });

The view header code:

<ion-view title="Montage View" class="bar-stable" cache-view="false" hide-nav-bar="{{minimal}}">

And then the toggle between full screen and normal in that view:

$scope.switchMinimal = function()
    {
        $scope.minimal = !$scope.minimal;
        console.log ("Hide Statusbar");
        ionic.Platform.fullScreen($scope.minimal,!$scope.minimal);
      
        $ionicHistory.nextViewOptions({
              disableAnimate: true,
              disableBack: true
            });
      $state.go("montage", {minimal: $scope.minimal});  
    };