Implement infinite scrolling about angular-vs-repeat

[kamilkp]

I use infinite scrolling behaviour with vs-repeat. I just load more content when the user scrolls to the bottom and append those elements to the source array. But if you wanted the scroll to mimic like the entire collection of items is there then the vs-repeat fill element would have to have a proper size. I'd go with providing that size to vs-repeat rather then create fake items in the array. You're welcome to create a pull request on that if you are willing to implement this. And if you do remember that vs-repeat has a mode when you provide it with vs-size-property attribute. It also has to be taken into account.

[kentcdodds]

Question about infinite scrolling you've done... How did you accomplish that with vs-repeat? I'm trying to use ngInfiniteScroll but that's not working for me because the way that it works and the way that vs-repeat work. Is there any way that I could pass vs-repeat a function to call when the user is x items away from the bottom? Would you accept a PR that would do this?

[kamilkp]

Hmm, looks to me that this could be accomplished fairly easy without modifying the library. My virtual scroll was fetching more elements when the user scrolled all the way down. So i set up an event listener for the scroll event and in thr handler i check the scroll position. If you want the fetching to be triggered when the user is 'x' items away you could set up a '$watch' on a proper scope and watch for 'startIndex' or 'endIndex' vs-repeat inner property. Then check if 'collectionLength - endIndex < x' fetch more elements.

[kentcdodds]

Cool. Seems like that would work pretty well. I'm having internet issues right now preventing me from trying it out on jsbin, but I'll give it a shot. Looks promising though. Would probably be something to add to the docs as an example for sure.

[kentcdodds]

Looks like this doesn't work with the current implementation. The problem is that vs-repeat creates a child scope and I don't have access to the endIndex that's created by the vs-repeat's scope. We need to add that as an additional attribute to bind that properly. I'll make a PR for this and we'll see what you think.

[kamilkp]

Hmm,
you said that:

vs-repeat creates a child scope and I don't have access to the endIndex that's created by the vs-repeat's scope

As it's true that vs-repeat created a scope, it is not true that you don't have access to it. At first i thought about accessing it via $$childHead property on the parent scope, but that obviously is far from an elegant solution. But there is one very elegant. I have created a fiddle for you to check out how it's done: http://jsfiddle.net/tcv2oz41/1/

Basically the idea is to use ng-init directive on the vs-repeat element like this:

ng-init="setUpWatcher()"

and then in your controller write a function like this:

$scope.setUpWatcher = function(){
    // this - is a reference to the scope that originally calls
    // this method i.e. the vs-repeat scope
    this.$watch('endIndex', function(val){
        $scope.currentEndIndex = val;
    });
};

[kentcdodds]

That's a very interesting approach.... I believe it is acceptable. Though I
believe that my PR is a more elegant and straightforward solution. Is there
a reason you would prefer to avoid merging my PR?

Kent C. Dodds
https://twitter.com/kentcdodds
https://plus.google.com/114245123507194646768 [email protected]
http://www.linkedin.com/profile/view?id=67772537
http://mormon.org/me/1J5N/Kent

On Wed, Sep 10, 2014 at 12:31 AM, kamilkp [email protected] wrote:

Hmm,
you said that:

vs-repeat creates a child scope and I don't have access to the endIndex
that's created by the vs-repeat's scope

As it's true that vs-repeat created a scope, it is not true that you
don't have access to it. At first i thought about accessing it via
$$childHead property on the parent scope, but that obviously is far from
an elegant solution. But there is one very elegant. I have created a fiddle
for you to check out how it's done: http://jsfiddle.net/tcv2oz41/1/

Basically the idea is to use ng-init directive on the vs-repeat element
like this:

ng-init="setUpWatcher()"

and then in your controller write a function like this:

$scope.setUpWatcher = function(){
// this - is a reference to the scope that originally calls
// this method i.e. the vs-repeat scope
this.$watch('endIndex', function(val){
$scope.currentEndIndex = val;
});};

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

[kamilkp]

Well the library shall be kept simple. If something can be implemented in a clean way without the need to extend the library that's what i prefer. Otherwise all those little extensions will eventually take their toll on performance for user that don't use nor need those features. And by the way, you set up a $watch there which is not needed because startIndex and endIndex is basically changed only in one place in code so this function could be called directly from there. Also the $parse($attrs.vsOnIndexChange) in every watcher handler is inefficient. This expression could be parsed once and then the result of parsing (a function) called on $scope in the handler.

[kentcdodds]

All terrifically valid points. Thanks for the help!

[kamilkp]

One more thing. You can write a reusable directive like this:

directive('onVsIndexChange', ['$parse', function($parse){
    return function($scope, $element, $attrs){
        var expr = $parse($attrs.onVsIndexChange);
        var fn = function(){
            expr($scope);
        }
        $scope.$watch('startIndex', fn);
        $scope.$watch('endIndex', fn);  
    };
}]);

and use it like that:

<div vs-repeat on-vs-index-change="indexChanged(startIndex)">
    <!-- ... -->
</div>

That way you are not extending the library but at the same time you have basically the exact same api as the one that you prefer.

[kentcdodds]

I have learned a few very useful techniques from you here! Thanks!