Ionic: Method call on page enter

Question

I have a

< ion-side-menu >

with links to my pages defined here:

    app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

      $stateProvider.state('content', {
        url: "/content",
        abstract: true,
        templateUrl: "templates/sidemenu.html",
        controller: 'SideController'
      });

      $stateProvider.state('content.home', {
        url: "/home",
        views: {
          'menuContent': {
            templateUrl: "templates/home.html",
            controller: "HomeController"
          }
        }
      });

      $stateProvider.state('content.nearby', {
        url: "/nearby",
        views: {
          'menuContent': {
            templateUrl: "templates/nearby.html",
            controller: "NearbyController"
          }
        }
      });

      $stateProvider.state('content.map', {
        url: "/map",
        views: {
          'menuContent': {
            templateUrl: "templates/map.html",
            controller: "MapController"
          }
        }
      });

      $stateProvider.state('content.radar', {
        url: "/radar",
        views: {
          'menuContent': {
            templateUrl: "templates/radar.html",
            controller: "RadarController"
          }
        }
      });

      $stateProvider.state('content.location-details', {
        url: "/location-details/:index",
        views: {
          'menuContent': {
            templateUrl: "templates/location-details.html",
            controller: "DetailsController"
          }
        },
        resolve: {
          currentLocation: function($stateParams, shareService, NearbyFactory)
          {
            return NearbyFactory.getLocations()[$stateParams.index];
          }
        }

      });

      $urlRouterProvider.otherwise("/content/home");
    });

I want to execute a method in my controllers when the user navigates to this page and when the page is left (for loading AJAX data or start listening to some Cordova sensors). Like this:

    app.controller("HomeController", function()
    {
      $scope.onEnter = function(previous_page)
      {
       ...
      };

      $scope.onExit = function(next_page)
      {
       ...
      };
    });

I've already tried onEnter and onExit inside the $stateProvider state but afaik I don't have my $scope there.

What is the easiest/best/nicest way to get this functionality? It would be great if I could determine the previous/next page and if the user navigated back/forward. I tried this:

$scope.$on('$routeChangeStart', function(event, next, current)
{
 console.log(next);
});

but this didn't work every time and it didn't fire when loading the page. This also seems a bit dirty to me because I'd have to implement this in every single controller.

Thank you!

Answer 1

You can use $ionicView.beforeEnter and beforeLeave. Simply add this to your HomeController :

   app.controller("HomeController", function()
{
        $scope.$on('$ionicView.beforeEnter', function() {
           //do stuff before enter

        });
         $scope.$on('$ionicView.beforeLeave', function() {
           //do your stuff after leaving

        });
});

You can check the docs of the $ionicView here.