bug: anchorScroll doesn't work with collection-repeat

[jasonwinshell-br]

Type: bug

Platform: all

Type: bug

Platform: all

Type: bug

Platform: all

See this pen: http://codepen.io/jason314/pen/VYOKPx

BTW: For some reason this pen only renders in Safari and Chrome on Mac OS X, not Firefox. Can't figure out why.

using v1.0.0-rc.2 for my own static example. Same problem.

 1 self.anchorScroll = function(shouldAnimate) {
 2  self.resize().then(function() {
 3     var hash = $location.hash();
 4     var elm = hash && $document[0].getElementById(hash);
 5     if (!(hash && elm)) {
 6        scrollView.scrollTo(0, 0, !!shouldAnimate);
 7        return;
 8     }
 9     var curElm = elm;
10     var scrollLeft = 0, scrollTop = 0, levelsClimbed = 0;
11     do {
12        if (curElm !== null) 
13          scrollLeft += curElm.offsetLeft;
14        if (curElm !== null) 
15          scrollTop += curElm.offsetTop;
16        curElm = curElm.offsetParent;
17        levelsClimbed++;
18     }
19     while (curElm.attributes != self.element.attributes && curElm.offsetParent);
20     scrollView.scrollTo(scrollLeft, scrollTop, !!shouldAnimate);
21  });
22 };

I found two problems with with using anchorScroll and collection-repeat. ng-repeat works perfectly.
I'm using an 1000 element array. Each anchor id is "item-i"

(1) Can only go to anchor that is within the item-render-buffer window

• if outside, line 4 resolves elem to null

(2) If the anchor does resolve in the render buffer the scrollTop
at line 19 is a tiny number, e.g. 1. So the scrolling does not
occur

<ion-content delegate-handle="mainScroll">
 <ion-list>
  <ion-item collection-repeat="item in main.items"
    [item-render-buffer="N"]
    id="item-{{item}}">
    {{item}}
  </ion-item>
 </ion-list>
</ion-content>

Q: How can collection-repeat be used to window into dynamically acquired data -- not a static array.

collection-repeat requires an array of static data. I don't understand how this constraint would allow collection-repeat to work with a very common use case — dynamically loading data from a server. I have a server API than can return a window [i,j] of data elements from a very large data set, let's say 10,000. I want to show a list UI that shows a 50 element range - i.e. elements i to i+49. How, if collection-repeat is bound to static data, can it be used to window against a very large data size. It seems to me that the render buffer code needs to call user-provided a user provided function to request a range of data. Am I missing something here?

[perrygovier]

Sorry, colection-repeat doesn't support anchor scrolling. To maximize performance, some things had to be foregone and that's one of them.

Collection-repeat should resize if data is added or removed from your array. If it does not, a $scope.$apply() may be necessary depending on how your controller is structured.

If you're having trouble with that part, the forums would be a good place to ask for help, but regarding the anchor scrolling with collection-repeat, sorry, unless there's a demand large enough to warrant the decreased performance it probably wont happen.

[junmin]

Hello. I am facing the same problem. and I read #3547 too.
I am very clear that that collection-repeat doesn't support anchor scrolling completely.

In both case looks like you are discussing about anchor scrolling to an item which is NOT in the current ScrollView? this makes obvious sense CAN NOT do scrolling because of how collection-repeat works, the item is just not in the html DOM..

and here is my question, in my case, should be able to anchor scroll to an item which is in theview (buffer) already?

the test result is: only can anchor scroll to n-first rendered buffered item. but if you scroll to others item to get your scroll target be displayed ( get it into the DOM), you still cannot anchor scroll to it. (you can test this using @jasonwinshell-br 's codepen , remember changing the actual ng-repeat to collection-repeat first ).