A view with ion-item ng-repeat is not cached

ionic-v1
1

Hi, I’m dealing with this issue since I moved from beta13 to Beta14.

I have a “browse” view where there is a list of items generated dynamically using an ion-list and ion-item with ng-repeat.

If I click to one of the listed items to “see more” and tried to go back using the navigator’s back button, nothing is shown.

I’ve realized that if I manually print one of the items (outside the ng-repeat) when I go back, this is the only item that is shown so I guess there is a problem with ng-repeat and the cache views.

Anyone can help?

Thanks

2

can you create a simple codepen demonstrating the issue?

3

Yes, of course, here you have:

Usage:
Simply click on one of the item’s list and then go back using navigator button. The loaded browse list is not cached.
Thanks!

I don’t know why the code is not working embedded in this post.

4

it is because the whole controller is being cached, since the controller is being cached, the view is not being updated. If you set cache: false on the state in your app.config, it will reload and display properly.

I am still trying to wrap my head around when to use caching and when not to use it… I believe there is value, but I dont understand the proper utilizaton.

  .state('app.browse', {
    url: '/browse',
    cache : false, // <== my edit
    views: {
      'menuContent': {
        templateUrl: 'templates/browse.html',
        controller: 'BrowseCtrl'
      }
    }
  })

after a bit more digging I found you can add this to the top of the controller and force the data to be reloaded when entering the state; as an alternative to setting cache:false on the state

  // update view information
  $scope.$on( "$ionicView.enter", function( scopes, states ) {
    $scope.init();
  });

I modified your pen http://codepen.io/aaronksaunders/pen/EamZRj?editors=101

2 Likes
5

Awesome! That’s it!!! Thank you very much for your help!!!

6

was playing around a bit more to refresh myself for a class I am teaching and I modified your code to use ngResource instead of $http.

I also moved the model code out into the service you started to create… The service was abit tricky since you are using jsonp but there is definitely a way to manage that with ngResource

.factory('myService', function($resource) {
  var savedData = {}
  function set(data) {
    savedData = data;
  }
  //
  //
  function _get(_id) {
    console.log("_get(_id)  " + _id);

    var baseUrl = 'http://quedadas.magentadesigncorporation.com/quedadas/getUsersQdd/idquedada/:id/format/json';
    var itemResource = $resource(baseUrl,  { 
      id: _id ,
      callback: "JSON_CALLBACK"
    },{
      get : { 
        method :"JSONP"
      }
    });

    var item = itemResource.get();
    item.$promise.then(function (data) {
      // do something with the data
      console.log(data);
      return data;
    }, function(_error){
      console.log(_error)
    });

    return item.$promise;  
  }

  /**
  */
  function _query(_options) {
    var baseUrl = 'http://quedadas.magentadesigncorporation.com/quedadas/getActiveQdd/iduser/' + ':id/fecha_actual/:fecha/hora/:hora/format/json';
    var productsResource = $resource(baseUrl,  { 
      id: _options.iduser ,
      fecha: _options.fecha_actual,
      hora: _options.hora,
      callback: "JSON_CALLBACK"
    },{
      query : { 
        method :"JSONP", 
        isArray : false
      }

    });


    var products = productsResource.query();
    products.$promise.then(function (data) {
      // do something with the data
      console.log(data);
      return data;
    }, function(_error){
      console.log(_error)
    });

    return products.$promise;    
  }

  return {
    set: set,
    get: _get,
    query : _query
  }

});

And finally I added $stateParams to the detail page to more efficiently retrieve the selected item

  .state('app.detail', {
    url: '/detail/:id',
    views: {
      'menuContent': {
        templateUrl: 'templates/detail.html',
        controller: 'QddCtrl'
      }
    }
  });

get the parameter in the controller

.controller('QddCtrl', function($scope, myService, $stateParams) {
  myService.get($stateParams.id).then(function(_data){
    $scope.qdd = _data.result[0];
    
      console.log('Players to Qdd: ', $scope.qdd);
    
  }, function(_error){
    alert("error " + _error);
  })
})

http://codepen.io/aaronksaunders/pen/gbWgQe?editors=101

1 Like
7

Ok, so do you think is it better to move all my $http request to ngResource? I will move all models out into the service.

Thanks