Javascript – AngularJS / Ionic routing using $stateProvider – controller is not reloading the second time a state is called

angularjshybrid-mobile-appionic-frameworkjavascripturl-routing

Original Question

I'm developing a mobile app using the Ionic Framework and AngularJS and I am having issues with controllers not reloading once they have been initialised.

One of the state transitions (from 'app.postbox-details' to 'app.audit-questions') should pass a parameter to the 'app.audit-questions' controller but this controller does not update itself with the new parameter because it isn't reloading.

Code Example

app.js file – config

angular.module('sf-maintenance', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])           
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
       .state('home', {
           url: '/home',
           templateUrl: 'templates/home.html',
           controller: 'HomeCtrl',
       })
       .state('app', { //app state being the side-menu
           url: '/app',
           abstract: true, //means that this state will never be activated directly, users will always go to a child state instead.
           templateUrl: 'templates/side-menu.html',
           controller: 'MenuCtrl'
       })       
       .state('app.postbox-details', {
           url: '/postbox-details',
           views: {
               'menuContent': {
                   templateUrl: 'templates/postbox-details.html',
                   controller: 'PostboxDetailsCtrl'
               }
           }
       })
    .state('app.audit-questions', {
        url: '/audit-questions/:postboxGuid',
        views: {
            'menuContent': {
                templateUrl: 'templates/audit-questions.html',
                controller: 'AuditCtrl'
            }
        }
    })
    $urlRouterProvider.otherwise('/home');
});

controller.js file (left out the code that isn't relevant)

angular.module('starter.controllers', [])    
.controller('HomeCtrl', function ($scope) {
})    
.controller('MenuCtrl', function ($scope) {
})    
.controller('PostboxDetailsCtrl', function ($scope, $ionicLoading, $ionicPopup, $cordovaBarcodeScanner, $state, DataService) {

    $scope.postboxGuid = DataService.getNewGUID();
    //Rest of the controller functions are below
})    
.controller('AuditCtrl', function ($scope, $ionicSlideBoxDelegate, $stateParams, DataService) {

    $scope.auditDetails = {
        postboxGuid: $stateParams.postboxGuid
    };    
});

View – navigation code

The view code to perform the navigations all use <a> tags:

  • From the home view to the postbox-details view: <a class="button button-block button-dark icon-right ion-chevron-right" href="#/app/postbox-details">New inspection</a>
  • From the postbox-details view to audit-questions view: <a class="button button-block button-dark icon-right ion-chevron-right" ng-click="saveFormData()"
    ng-href="#/app/audit-questions/{{postboxGuid}}">New audit</a>

So does anybody know how to get controllers to reload once it has been initialised or if I am going about this problem the wrong way could you guide me to a method that will work?


Updated Information

I recently saw a related question and the response by @Radim Köhler pointed to the answer in this question which provides good information on why it may not be a good idea to use cache:false on a view because of performance.

I thought I would share this because in some situations you may benefit more performance-wise by using one of Ionic's built-in view life cycle events to run code without having to disable the view from being cached.

Best Solution

Views are standard cached in ionic. The caching can configured in the view or stateprovider.

http://ionicframework.com/docs/api/directive/ionNavView/

Related Question