Ng-if boolean doesn´t work after second view load

1

Hi all the Ionic’s community,

I’m a beginner with Ionic Framework (a couple of weeks) and I’m facing a little issue. Let me explain.
I started to build an app from the starter tabs app. So I almost have the same structure. The difference resides in my home.html, I have links to a state that use a different set of tabs (it’s defined as a second abstract mode).

The thing is, doing that way, there is no navigation back button. So, I’m trying to create a button in the header bar that will be shown on the second set of pages.
A little bit of code to be more clear ! :smile:

index.html

    <body ng-app="starter">
    <!-- Header of the page-->
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable" align-title="center">
        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side="left">
            <button class="button ion-arrow-left-a" ng-controller="FromGuideToHome" ng-if="$root.GuideActivated" ng-click="ReturnHome()">Back</button>
        </ion-nav-buttons>

        <ion-nav-buttons side="right">
            <button class="button">Logo</button>

        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

</body>

As you can see, I put a controller in my button to proceed the ReturnHome() function and a ng-if condition to control if the button should be shown or not. Maybe, it will not be the only button I’d like to add; that’s why I used ng-if and not ng-show.

Home Controller:

.controller('HomeCtrl', function ($scope, $stateParams,allGuides) {
    //console.log($stateParams);
    $scope.$root.GuideActivated = false;

    console.log($scope.$root.GuideActivated);
    $scope.guides = allGuides;
    
    })

The Home controller assigned the false value at the boolean: the button is not visible. That’s the correct behaviour.

Now, let’s see the Guide Controller, which is the controller I access after clicking in one of the link in the homepage.

Guide Controller:

.controller('GuideCtrl', function ($scope,$stateParams,getGuides) {
    $scope.$root.GuideActivated = true;

    console.log($scope.$root.GuideActivated);
    $scope.guide = getGuides.get($stateParams.ShortName);
})

The controller assigned a true value at the button, so we can click on the button (correct behaviour).

The controller of the button is the next one:

.controller('FromGuideToHome', function ($scope,$state,$stateParams) {
    console.log($stateParams.ShortName);

    $scope.ReturnHome = function () {
        $scope.$root.GuideActivated = false;
        console.log($scope.$root.GuideActivated);
        $state.go('tab.home');
    };
})

It redirects the user in the homepage (tab.home state) and at the same time, it turns off the button.
My issue is this one:
Firstly, from the Homepage, I click to go on the second page (Guide homepage): button appeared on the guide homepage
Then, I click on the button, I return on the homepage of my app : button is off
When I click one more time on the same link: in the guide homepage the button is off, I can’t see it.

It seems that the assignation $scope.$root.GuideActivated = true; is not treated. Or the controller GuideCtrl is not triggered the second time.

I did a codepen to explain my issue :
http://codepen.io/appyapp/pen/dYJBdR

Sorry for the long post :wink:

2

Have a look at Ionic view caching and events either in the doc or this forum.

3

Hi gmarziou,

Thanks for your reply ! I thought the solution was something like that and indeed, putting cache:false in the state configuration corresponding to my view, it solved the problem.
Now, I’ll see if it fits the coding I want for that view !

4

Great.

Alternatively, you could use an event, it’s supposed to be more performant than no cache in state.

$scope.$on('$ionicView.beforeEnter', function () {
   // Do something
});