The Problem of Run-Once Controllers in Ionic

Ionic is based on Angular. Angular has views and controllers. A view’s controller is supposed to execute each time the view is opened or navigated to. In Ionic, that doesn’t happen.

Take for instance this setup: you’re building a social app that has a Login view. You’ve configured the routes such that the Home view is set to open by default. Each time the app is loaded from scratch: (i) Home view opens, (ii) login session check is performed, and (iii) user is redirected to Login view if session has expired.

Now because Home view has loaded once and its controller executed alongside, the following piece of code will NOT execute again once login is successful on Login view and user is redirected back to Home view, perhaps through $state.go.

.controller('HomeController', function ($scope) {
 
    // Read username from local storage
    $scope.userEmail = window.localStorage['app.user.email'];
 
});

So if the value stored in local storage was an empty string when HomeController ran, $scope.userEmail would still be empty string even after LoginController has updated the local storage value.

Until this very moment, I didn’t have a damning clue to this apparently illogical problem. My searches for angular controller runs only once, angular $state.go controller doesn't execute, and so on naturally went fruitless because I wasn’t searching it right! Apparently, people were not facing the same problem.

A developer on stackoverflow reported that an NG controller should actually run each time its view loads. On the same stackoverflow question, I found my answer.

As per Ionic’s official docs on ion-view:

Views are cached to improve performance. Views can be cached, which means controllers normally only load once, which may affect your controller logic. To know when a view has entered or left, events have been added that are emitted from the view’s scope.

So the problem of run-once controllers is very Ionic specific. And so is the solution. The way to go about the problem is to move your code, that’s supposed to be executed each time a view is shown, from the root of your controller to the view’s $ionicView.enter event handler.

.controller('HomeController', function ($scope) {
 
    $scope.$on('$ionicView.enter', function () {
        // All code in this function will execute each time Home view is shown
        $scope.userEmail = window.localStorage['app.user.email'];
    });
 
});

That’s it!