Sidemenu loses track of current state after 9 transitions

ionic-v1
1

This seems very weird, and I am willing to admit that it might be user error, but if it is, I cannot see how.

I have a bare bones app I just created from the sidemenu starter. The only thing I have done is add more menu items, and corresponding templates and controllers. I have a total of 9 menu items in menu.html. If I open the menu and select an item it works correctly, for the first 9 attempts. After that the state gets completely messed up. The header shows the title of one view and the content of a completely different view is displayed and neither is necessarily for the menu item I selected. The browser hash changes correctly. Note that it does not matter what order I select the menu items in. I have tried this at least 10 times with quasi-random selection ordering and it fails every time on the 9th selection.

I have to admit that the failure point and the number of menu items is a bit too much of a coincidence, but I have looked at the state configuration, each of the views, and each of the controllers and everything seems to be in order. The only thing I am doing that might be a little uncommon is that I am reusing the same template across different views. So my state configuration has entries that look like this:

       .state('app.toprated', {
            url: "/toprated",
            views: {
                'menuContent': {
                    templateUrl: "templates/booklist.html",
                    controller: 'TopRatedCtrl'
                }
            }
        })
        .state('app.mostreviews', {
            url: "/mostreviews",
            views: {
                'menuContent': {
                    templateUrl: "templates/booklist.html",
                    controller: 'MostReviewsCtrl'
                }
            }
        })

An example of one of the controllers is as follows (they are literally all exactly like this except for the controller name and currentView title):

angular.module('myapp')
    .controller('MostReviewsCtrl', function($rootScope) {
        $rootScope.currentView = 'Most Reviews';

    });

And the shared template looks like this:

<ion-view view-title="{{currentView}}">
    <ion-content>
        <h1>{{currentView}}</h1>
        <ion-list>
            <ion-item ng-repeat="book in books" href="#/app/book/{{book.id}}">
                {{book.title}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

I have seen it fail on that 9th selection regardless of whether a view using the shared template is selected or one of the few other views that has its own template. This does not make any sense and I refuse to believe that there’s a 9-click limit. :slight_smile: I should add that once it breaks, it’s completely busted, there’s no recovering by selecting a different menu item. The URL hash changes but absolutely nothing happens in the view. It’s like the whole state machine just fell on the floor.

Any thoughts on this?

Thanks.

2

Could you build a codepen to reproduce it?

3

That sounds like it might be a caching issue. By default, Ionic will cache a maximum of 10 views (as per http://ionicframework.com/docs/api/directive/ionView/).

Have you tried with caching off? http://ionicframework.com/docs/api/directive/ionNavView/ has details on how to disable it globally or per-state.

1 Like
4

Bingo! I turned off caching globally and now I can no longer reproduce this behavior. Thanks!