Using Infinite scroll in angularjs and jade

Question

I'm using angularjs infinite scroll in my dashboard web app. I have a single page which holds multiple infinite scrollable widgets. Since I want to have an infinite scroll for each of them I decided to use this directive but somehow it's not working as expected. I want the infinite scroll to work relative to the inner content div scrollbar which uses perfect scrollbar instead of main browser window. I have searched on google and found multiple threads explaining 2 new variables which can be used to change the default behavior: infinite-scroll-container and infinite-scroll-parent. I tried both but none of them is working for me. I think use of perfect-scrollbar is creating the issue.

Jade code:

          .hor-col(ng-repeat="stream in socialStreams")
                .box-body(style='min-height: 400px;')
                    perfect-scrollbar.timeline-scroller(wheel-propagation="true" wheel-speed="1" min-scrollbar-length="8" suppressScrollX="true" id="streamScroll-{{$index}}")
                        div(infinite-scroll="loadMorePosts(stream['streamId'], stream['endCursor'])", infinite-scroll-disabled="stream['infiniteScrollDisabled']",  infinite-scroll-container="'#streamScroll-{{$index}}'")

Since there are multiple widgets, I can't use same id or class for infinite-scroll-container and therefore decided to generate dynamic id.

How can I inject a dynamic class inside infinite-scroll-container ?

I'm getting following error:

Error: Failed to execute 'querySelector' on 'Document': '#streamScroll-{{$index}}' is not a valid selector.

P.S. I have seen following threads but none of them covered my requirement:

https://github.com/sroze/ngInfiniteScroll/issues/57

angularjs infinite scroll in a container

AngularJS - ng-repeat to assign/generate a new unique ID

Answer 1

Angular material has pretty usefull infinite scroll . I think you should take a look at it Infinite Scroll

Answer 2

It is not an actual answer to the problem, but it's worth trying.
I can show you how you can write your own infinite-scroll directive. Here's the code:

HTML

<div infinite-scroll="loadSomeData()" load-on="scrollToTop">
...    
</div>

The directive:

app.directive('infiniteScroll', function () {
        return {
            restrict: 'A',
            link: function ($scope, element, attrs) {
                var raw = element[0];
                element.bind('scroll', function () {
                    if (attrs.loadOn === 'scrollToTop') {
                        if (raw.scrollTop === 0) {
                            $scope.$apply(attrs.infiniteScroll);
                        }
                    } else {
                        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                            $scope.$apply(attrs.infiniteScroll);
                        }
                    }
                });
            }
        };
    }
 );

In the controller of the html:

$scope.loadSomeData = function () {
    // Load some data here.
};

Notice that load-on="scrollToTop" is optional in the html div tag. This is only if you want to execute loadSomeData() function when scrolling to top, otherwise it will execute the function when scrolling to the bottom of the div.

Answer 3

I'm not sure that you need curly braces inside the infinite-scroll-container parameter. You should pass computable string in it, so I'll suggest you to try it like this:

infinite-scroll-container="'#streamScroll-' + $index"

Cause this parameter, like others, don't need interpolation with curly braces, it is ready to take the expression.