bug: ng-switch with collection-repeat

[voliva]

Type: bug

Platform: all

Having two collection-repeats in the same page with a ng-switch breaks the scroll when "switching". The result is somewhat funny though (when you try to scroll, the items disapear from top to bottom (as they're being redrawn like it is scrolling, but the scroll is absolutelty locked))

Plunker here:
http://plnkr.co/edit/MNTJq0QUbRZxiJumoVL9?p=preview

Just scroll a bit to check it works initially, click on "two" (now it doesn't scroll, but there're only 3 elements (as expected)) and when you go back to "one" the bug is clearly visible when you try to scroll down.

I wasn't sure to flag this as a bug or as a documentation thingy, as the docs say:
edit: Important update below!

4 Each collection-repeat list will take up all of its parent scrollView's space. If you wish to have multiple lists on one page, put each list within its own ionScroll container.
5 You should not use the ng-show and ng-hide directives on your ion-content/ion-scroll elements that have a collection-repeat inside. ng-show and ng-hide apply the display: none css rule to the content's style, causing the scrollView to read the width and height of the content as 0. Resultingly, collection-repeat will render elements that have just been un-hidden incorrectly.

But the thing here is that ng-switch doesn't use ng-show/ng-hide, but it just comments out the whole DOM. Maybe you should change the docs to say that there shouldn't be two collection-repeats in the same scrollView at all?

In my case there's an easy fix: Put only one collection repeat "pointing" to an array in the scope, and switch this array in the controller depending on which button is pressed. I tried it this way and it works perfectly (there's then only 1 collection-repeat) (collection-repeat is not inside an ng-switch)

EDIT: Just checked what happened in the case where only one tab has collection-repeat, and it's broken as well. Plunker or it didn't happen! http://plnkr.co/edit/Nr2sxcGql3WoRQtNnjMd?p=preview

[georgir]

if you wrap the list in a separate ion-content that is inside the ng-switch-when, it works fine (set scroll="false" on the top ion-content though, and you'll likely get some other issues that are related to nesting of ion-contents but not to collection-repeat)

[dbaq]

I can confirm this issue, wrapping it inside an ion-content does the job but since we cannot use ng-if with ion-content, it is still blocking. Any updates?

[ajoslin]

Fixed. The problem was that collection-repeat's logic expected that the scrollView would always get destroyed with the repeater. But there are some situations where you want that scrollView to have a different lifecycle than the repeater.

collection-repeat overrides the scrollView's content sizing and onscroll behavior. Now, when it's destroyed, it restores that behavior to normal and resizes the scrollView.