Scroll position not remembered when coming back from details view

[gigocabrera]

I have searched the forum extensively and compared my code with other samples having similar issues but I can’t figure it out

Can anybody help please?

To reproduce on a live environment:

1. Go to the following URL
   https://brilliant-inferno-1044.firebaseapp.com/#/
2. Login with default credentials
3. On the side menu select Accounts
4. Select 1Personal account to see the list of transactions
5. Scrool to the bottom of the list
6. Swipe on a transaction and tap Edit
7. On the details view, tap the back botton on the header (labeled 1Personal)

Here’s my markup
https://github.com/gigocabrera/moneyleash/blob/master/www/templates/transactionsByDay.html

Here’s the controller

gigocabrera/moneyleash/blob/master/www/js/controllers-transactions.js

[bokboki2002]

My guess is that the problem could be $scope.list method in the controllers-transactions.js which is being called every time, which refreshes the list of transactions, so you are not using cached version.

[gigocabrera]

@bokboki2002 I appreciate you taking a look at this.

I took your advice and removed the scope.list method from being called every time but it didn’t work. Then I decided to create a codepen to see if I could recreate the issue but the scroll position is remembered in the codepen sample

See the Pen Remembering Scroll Position by Luis Cabrera (@gigocabrera) on CodePen.

Even when I use the same markup from the codepen in the transactionsByDay.html template I don’t get it to remember the scroll position

<ion-view title={{AccountTitle}}>
    <ion-nav-buttons side="right">
        <button class="button-icon ion-plus customHeaderIcon customHeaderIconSmall" ng-click="createTransaction('Add')"></button>
    </ion-nav-buttons>
    <ion-content has-header="true">
        <ion-list can-swipe="true">
            <ion-item ng-repeat="transaction in transactions">
                {{ transaction.payee }}
                <ion-option-button class="button-energized" ng-click="editTransaction(transaction)">
                    &nbsp;&nbsp;Edit&nbsp;&nbsp;
                </ion-option-button>
                <ion-option-button class="button-assertive" ng-click="deleteTransaction(transaction)">
                    Delete
                </ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

The only difference I see is that in the codepen I am using the nightly builds. How can I use the nightly builds in my app? I want to test that possibility

 <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
 <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

[bokboki2002]

I’ve been looking at your live example one more time and comparing that to codepen example. Difference is that in codepen views are cached (in ion-nav-view element there are two child elements - one cached - previous view and another active - current view.
In live example there is only one active view, which is the reason why when you go back view is recreated and scroll position is lost.
Maybe you have disabled cache somewhere in your setup?

[fkbart]

I think topic being opened many times and it for some people it works and for some it does.
Just like this link : http://codepen.io/mhartington/pen/nfujL

You see the navigation remembers the possition when you go back to the list but when you try to recreate this locally there is no way to make it work. I have similar problem here
The only difference is I am no using nightly builds, just latest 1.0 release There must be some simple trick to this. I do not think I need to enable some extra caching when codepen don’t.

when I look at the JSdoc there is a note about
$ionicConfigProvider.views.forwardCache(true);

but not sure if it applies in this context of problem.

[gigocabrera]

THIS MUST BE A BUG

@bokboki2002 I have not disabled cache anywhere as I don’t even know how to do that just yet (still a noob). @fkbart is right, in codepen everything works well but NOT on a local environment,

Here’s what I did:

1. Downloaded the latest nightly 1.0.0-nightly-1373 (2015-06-12) to my local
2. I copied the exact code from my codepen posted earlier to my app
3. Tested locally and scroll position is not remembered
4. Uploaded to Firebase and same behavior (it doesn’t work)
5. Uploaded to Ionic View and same thing

Click here to see these changes LIVE just login and you’ll land on the Dashboard page which has the same logic as the codepen.

These changes are also committed to my Github repo in case you want to take a look:

[bokboki2002]

It’s bug alright, but in your code

You have this in your app.js code:

 $ionicConfigProvider.views.maxCache(0);

in the first line of: moneyleashapp.config function.

[gigocabrera]

@bokboki2002 I feel like an idiot But I guess this is how you learn, right?

Thank you very much for all your help man, you rock!!!

P.S. I guess I know how to disable cache now

[bokboki2002]

@gigocabrera No need to feel bad. Learning advanced things in a new framework is almost always a painful process. But as you said it, you learned one more new thing
Happy coding!

[fkbart]

Btw. did this helped ?
I do not have such thing in my code as I let the framework to use default value 10. I need to try then highly build , this is the only diff I have now.

[gigocabrera]

@fkbart it did work for me. The scroll position is being remembered in the browser, in Firebase live app, and in Ionic View.

Maybe if you share your code the Ionic gurus will be able to help you.

[fkbart]

I will probably try out first the highly build and then probably will try to put a demo together on codeine.

Thanks,
-Fk

[fkbart]

So nightly build did not really worked which means I will have to find a time I need to put together a codepen. Cuz just like in your case you think you have it correct, you can see identical things like the others but for some reason it does not work.

In My case my structure is little bit different :

1. I have list ION-LIST -> Collection repeat.
2. Details is not ionic content -but tabs, and each tab has ion-content.

My LIST is loaded only once. so We will see.

@bokboki2002 btw. I wonder where do you see in the ionic code that this or that view is cached so I can do little home work (debugging) on my side to see, where they put in view in case, and when coming back to list view they take it out.

[bokboki2002]

@fkbart, here is how you can do debugging:
Using Chrome, open Developer tools. I also usually toggle Device Mode (small Mobile icon in the top left corner of Developer tools, next to Search icon), to emulate specific device.

For this specific problem that @gigocabrera had I was looking directly at DOM elements and how are they created and destroyed.

What I noticed is that one <ion-view> element was created (main list) and then when the details view was presented, main list <ion-view> got destroyed and another one got created for details view.
Normally, when cache is applied, both views are in the DOM. It is just that one has attribute nav-view="cached" and another one has nav-view="active".

I hope this helps.

[fkbart]

Right, the Chrome, inspector things is clear

I was just thinking exactly what you just described in second part + if inside ionic -> ionic-bundle inside some directive / or other code implementation you have seen this. put into the cache, retrieve from cache, current list of elements inside cache, etc…

But I will look at the DOM.

Thanks that helps,

=FK

[fkbart]

Just for the record. Not sure if this is a bug or not but my problem with not remembering position was cased by detail page.

Evertime I access the detail view I want the view to be always scroll all the way to the top even you accessed it before. so in the controller I call

    $ionicScrollDelegate.scrollTop();

But then if I decide to hit BACK button to go back this scrollTop() injected only to this detail view also affect the PART list view. When I remove it my collection repeat nicely remember the position.

So the Question could be is this is bug ?