Detecting when a user has moved off a view?

ionic-v1
#1

I seem to be having problems with a view in my Ionic project. This particular view uses $cordovaMedia to play a wav file under the user’s control.

Now, when the user move ‘< Back’ to the previous view or chooses another tab, I want the $cordovaMedia object to stop playing and unload.

I have included the following code on in my controller:

  $scope.$on("$destroy"), function() {
    $cordovaMedia.stop(media);
    $cordovaMedia.release(media);
  };

However, when I leave the page, the media keeps playing, and I notice in XCode that the memory usage remains high - so I assume the object is not being stopped and destroyed as I want.

I have also specified ‘cache: false’ in the main state setup:

  .state('app.player', {
    cache: false,
    url: "/recording/:recordingId",
    views: {
      'menuContent': {
        templateUrl: "templates/player.html",
        controller: 'PlayerCtrl'
      }
    }
  })

I have even tried $scope.$on("$locationChangeStart") instead of “$destroy” to see if that would work, but no difference.

I’d appreciate it if anyone could point out where I am going wrong? Thanks.

#2

You should use the events like $ionicView.leave.
Here’s a complete list.

1 Like
#3

Hey @Mik378 - Thanks for your quick reply. I just tried using $ionicView.leave, beforeLeave and afterLeave, but it still does not seem to fire. I placed a console.log() message in the function just in case the media was being cached separately, but not getting the message in the console, so I suspect that the event is just not being triggered somehow… ??

Seen a few other threads on here with people reporting a problem with $ionicView.xxx so not sure if it is a bug in the current beta?

EDIT: Just spotted this, lodged about 1/2 hour ago… https://github.com/driftyco/ionic/issues/2818

#4

It seems to work fine for me

  $scope.$on('$ionicView.beforeLeave', function(){
    alert("Before Leaving");
  });

  $scope.$on('$ionicView.afterLeave', function(){
    alert("After Leaving");
  });
1 Like
Unknown provider: $ionicViewProvider
#5

I think $ionicView.beforeLeave and $ionicView.afterLeave are not called when the user chooses another tab. In the codepen @mhartington just posted, I only get the alert when changing views within the home tab, not when switching away from the home tab.

2 Likes
#6

Thanks for testing this.

My app uses the ‘sidemenu’ starter template. I have a side menu which call a view with a list, then tapping on a list item calls the subsequent player view which is where I am having the problem. Not sure if the order of the routing is a factor here. When I go ‘Back’ from the player view to the list again, or use the sidemenu to choose another section of the app, the events don’t seem to fire?

#7

@mikemintz Yeah I read more on that github issue after I posted, woops :grin:

@CyberFerret Any chance you could create a simplified version of this in a codepen?

#8

@mhartington

Here’s a codepen:

Get on the home tab and make the sure the Youtube video player is playing and not muted.
Click on “Scientific Facts”.
The video should get removed from the DOM but doesn’t.

It finally does when the user navigates back to the page.

#9

Ok - I solved my issue. Turned out to be a completely stupid rookie mistake on my part… I had coded my block as:

$scope.$on('$ionicView.beforeLeave'), function(){
    alert("Before Leaving");
  };

Note the ‘)’ after ‘$ionicView.beforeLeave’ and the missing ‘)’ at the end. Ionic accepted this as a valid block even with this syntax error, and the call was never being triggered! Moving the closing bracket to the proper spot fixed this.

#10

I disagree.
It still applies:

“I only get the alert when changing views within the home tab, not when switching away from the home tab.”

In my case also, the beforeLeave event isn’t triggered when I click directly on another tab.
However, the enter event is well triggered.
Sounds like a real bug.

1 Like
#11

Typically, it’s very annoying since I can’t drop some event listeners, specific to a tab, just before switching tabs…

#12

Apologies - I meant that the issue was solved in MY situation. I am using a SideMenu based app, and it works within that context. Haven’t test in a Tab based app, but I take your word that it is broken there, as other have mentioned it as well. Hopefully will be fixed up by Ionic soon…

1 Like
#13

I’m also having this issue. ionicView.leave and beforeLeave events are not being fired when changing views via tabs.

IonView lifecycle event not firing at all
#14

Hey guys, got an issue open for this.

Feel free to add to the issue as well.

1 Like