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

punov · Accepted Answer · 2015-10-21 11:16:26Z

8

+50

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.

answered Oct 21, 2015 at 11:16

punov

8389 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

punov Over a year ago

Awesome! Very glad that it helped.

Marin Takanov · Accepted Answer · 2015-10-27 15:20:04Z

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.

salih baki sayer · Accepted Answer · 2015-10-27 15:25:46Z

1

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

answered Oct 27, 2015 at 15:25

salih baki sayer

1041 silver badge10 bronze badges

Collectives™ on Stack Overflow

Using Infinite scroll in angularjs and jade

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related