Ionic - View Leave Events Never Called

Question

After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:

$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave

Documentation: (http://ionicframework.com/blog/navigating-the-changes/)

Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?

Events Fired:

$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter

I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.

<div ng-controller="fbMenuController">
    <ion-side-menus>

        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">Menu</h1>
            </ion-header-bar>
            <ion-content scroll="true">
                <div ng-repeat="Group in fb.Model.MenuGroups">
                    <ion-item class="item-divider">{{Group.Name}}</ion-item>
                    <!-- href="#/Main/{{Page.Name}}" -->
                    <a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
                        {{ Page.Name }}
                    </a>
                </div>

            </ion-content>

        </ion-side-menu>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
                <div class="buttons">
                    <button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
                </div>
                <h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
            </ion-header-bar>

            <ion-content scroll="true">
                <ion-nav-view name="Main">

                </ion-nav-view>
            </ion-content>
        </ion-side-menu-content>

    </ion-side-menus>
</div>

Answer 1

If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:

 $scope.$on("$ionicNavView.leave")

Answer 2

Found the problem. The 'Main' state was defined without the attribute

abstract: true

this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.

Answer 3

I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:

If a view leaves but is cached, then this event will not fire again on a subsequent viewing.

It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.

See docs here.

Answer 4

This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".

On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.

Solution: On MAIN controller I added:

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
     if (fromState.name === 'name-of-leaving-state') {

      //your code here, similar behavior with .$on('$ionicView.leave') 

     }
});

Hope it helps