Images not reloading on iOS after the app is inactive for a while

ionic-v1
1

Hi all, I’m writing my first ionic app (and a newbie to Angular JS too). I have a view that is displaying dynamic images from an http URL. The problem I am facing is when I load the app, the images show great and it keeps changing (the URL changes images 3 times a second). When I switch to background and back to foreground, that too works fine, for a while. After a brief while, if bring it back from background, the images don’t show up anymore - I need to kill and restart the app.

I’ve disabled caching at the view, added random keys to the URL.

<ion-view title="Card View" class="bar-energized" cache-view="false">
<ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-grid"></button>
</ion-nav-buttons>
    <ion-content >
         <div class="list card" ng-repeat="montage in montages">
            <div class="item">
               <i class="ion-monitor"></i>
               <b>{{montage.name}}</b>
                <p>{{montage.detail}}</p>
            </div>
            <div class="item item-image">
                    <img ng-src="{{zmUrl}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{montage.id}}&scale=100&maxfps=3&buffer=1000&user={{zmUsername}}&pass={{zmPassword}}&rand={{rand}}"   />
            </div>
        </div>
       </ion-content>
</ion-view>

In app.js this is how I’ve set up the route

.state('app.viewcam-cards', {
               url: "/viewcam-cards",
               cache:false,
               views: {
               'menuContent': {
               templateUrl: "templates/viewcam-cards.html",
               controller: 'ViewcamCardsCtrl'
               }
            }
           });
2

Okay, I’ve made 90progress, but still facing a few issues.

It seems the controller does not get called each time I see the view. So I generated a new random number for the URL on $scope.$on(’$ionicView.afterEnter’, function() inside ViewcamCardsCtrl. I am printing the random number each time I see my view and have validated that the random number gets re-generated when I change views. However, if I am already in that view and switch to home screen and back, that callback is not triggered. So I guess I’ll have to trap another callback

3

Can you put this in a codepen? If the view caching is set to false it should be calling the controller each time you load the view.

From the docs:

Note that because we are caching these views, we aren’t destroying scopes. Instead, scopes are being disconnected from the watch cycle. Because scopes are not being destroyed and recreated, controllers are not loading again on a subsequent viewing.

4

Brandy, thanks. As it turns out, the view does not re-load even when cache is off when you are suspending and resuming the app on iPhone. I have the following code inside ViewCamCardsCtrl that does not get called when you suspend/resume. It does get called when you are changing from one screen to another, or starting the app for the first time.

 $scope.$on('$ionicView.afterEnter', function(){
                       $rootScope.rand=Math.floor((Math.random()*100000)+1);
                       console.log("*********IN VIEW, generated " + $rootScope.rand);
                       });

To solve the suspend/resume problem, I had to do this in app.js: The key logic was to trap the global resume callback and then use $state.go($state.current, {}, {reload: true}); to refresh the view control if it was in view before suspend. If it was not, the callback above would be called anyway.

.run(function($ionicPlatform, $rootScope, $state) {
  $ionicPlatform.ready(function() {
    document.addEventListener("resume", function()
    {
            console.log("****The application is resuming from the background");
            $rootScope.rand = Math.floor((Math.random()*100000)+1);
            console.log("** generated Random of " + $rootScope.rand);
            $state.go($state.current, {}, {reload: true});
    }, false);
1 Like