Ionic - View events that were not triggered.

Question

After upgrading an existing Ionic project from 1.13 to beta 1.14, I experienced some behavior that I cannot explain. When switching from one viewport to another, the old view does not leave the page. When registering angular ui router events and ionic navigation events, I noticed that Ionic Exit Events do not fire:

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

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

Has anyone else experienced this behavior? If so, have you found a way to solve this?

Events:

 $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 a QrToken view if I haven't nested it in Main, so I believe the problem is there. Can anyone take a look at my basic template and help 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

I had this problem the other day. I listened to the event on my child controllers. When I moved the listener to the parent, it worked. I did not quite understand why, but now I think I know why. This is because of how Ionic caches views. In particular, this line from the docs:

If the view exits but is cached, then this event will no longer trigger a subsequent view.

Your views probably were cached before you added a listener, and the vacation event never fired. But since your parent ... well ... the parent, his vacation event fires every time you leave one of his children. I haven't officially tested this, it's just a hunch. To test, try indicating that ionic does not cache the representation by adding the cache representation = false to your expression about the ion's representation.

See the docs here .

Answer 2

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

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

Answer 3

Found a problem. The state "Main" was defined without an attribute

 abstract: true 

this worked in Ionic 1.13 beta, but Aparently breaks in Ionic 1.14 beta. This change could not be found in any of the migration messages to Ionic, AngularJS, or Angular -ui-router, so I don’t know why this solved it. If someone can tell you more about the behavior in this situation, I would be grateful, but at the moment I have a solution.

Answer 4

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

In my case, $ionicView.leave worked in nested views, but not when moving between tabs and not $ionicParentView.leave , so I applied it with a different solution.

Solution: In the 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 this helps