Controller is not being reset after href call

Question

I have a AngularJs controller in Ionic Framework.

.controller('LocationDetailCtrl', ['$scope','$cordovaGeolocation','$cordovaCamera', '$cordovaFile','$stateParams','Location', LocationDetailCtrl]); 
    function LocationDetailCtrl ($scope, $cordovaGeolocation, $cordovaCamera, $cordovaFile, $stateParams, Location) {
        $scope.locationRow = {};
        $scope.test = "";

        $scope.images = [];   

        Location.getById($stateParams.locationId).then(function(result){
          //alert("I'm in");
          $scope.locationRow = result;
        });            
    }

I have code in view somewhere that does this:

<ion-item class="item-remove-animate item-icon-right" ng-repeat="location in locations" type="item-text-wrap" href="#/locations/{{location.id}}/all">
    <h2>{{ location.aplicant_name}}</h2>
    <p>{{ location.form_type }}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" ng-click="remove(location)" translate>Delete</ion-option-button>
</ion-item>

In my stateprovider I have this:

.state('location-detail', {
      url: '/locations/{locationId}',
      abstract: true,    
      templateUrl: 'templates/location-detail.html',
      controller: 'LocationDetailCtrl'    
})
.state('location-detail.all', {
     url: '/all',
     views: {
         'loc-detail-view': {
             templateUrl: 'templates/location/location-map-all.html'
         }
     }
 })

My problem is, on the first href click I get the values for database, its all alright. But when I go back and press another list time, I would get the same value I got earlier.

Turns out Location.getById() is not being called the second time around.

Sworup Shakya · Accepted Answer · 2015-06-14T05:22:30.127

Never-mind, I found the answer. Turns out my controller is being cached by default.

I modified the state provider with this code and it now refreshes the view with new model.

  .state('location-detail', {
      url: '/locations/{locationId}',
      cache: false,
      abstract: true,
      templateUrl: 'templates/location-detail.html',
      controller: 'LocationDetailCtrl'
  })

The difference here is cache:false.

Cheers!

score 1 · Answer 2 · answered Jun 14 '15 at 11:08

1

Ionic views are cached by default, However you can manually set the cache to false in the view, this will make the controller to load again.

read more here, How ever what you have done is also correct, But I personally prefer the method I mentioned here as it will give more control

answered Jun 14 '15 at 11:08

sameera207

16,547
19
87
152

It would seem logical to cache some views and not cache the rest. I wouldn't want to disable cache globally or for all forward views. Thanks for pointing to the detailed documentation page. – Sworup Shakya Jun 15 '15 at 04:57

score 1 · Answer 3 · answered Jun 16 '15 at 14:02

If you want to keep your page cached for any reason you could wrap all of your function you need to run inside of another funciton and then on the event $ionicView.beforeEnter or afterEnter or enter, you can call that function. Then you can keep the page cached and still have all of your functions run everytime the page is entered. For example in an app i made I did not want to have the homepage uncached, but i need some funcitons to pull fresh data everytime the page is entered. So I did this:

$scope.$on('$ionicView.beforeEnter', function () {
            $scope.doRefresh();
        });

That way the page can stay cached but my app still behaves like I want it to. Take a look at some more of the ionicView methods: http://ionicframework.com/docs/api/directive/ionView/

Controller is not being reset after href call

3 Answers3