Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Infinite scroll in angularjs and jade

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

like image 293
dark_shadow Avatar asked Oct 17 '15 19:10

dark_shadow


People also ask

How to use infinite scroll in AngularJS?

ngInfiniteScroll is a directive that you can use to implement infinite scrolling in your AngularJS applications. Simply declare which function to call when the user gets close to the bottom of the content with the directive and the module will take care of the rest.

How is infinite scroll implemented?

Infinite scrolling will require two key parts. One part will be a check for the window scroll position and the height of the window to determine if a user has reached the bottom of the page. Another part will be handling the request for additional information to display.

What is infinite scroll enabled?

Infinite scrolling is a listing-page design approach which loads content continuously as the user scrolls down. It eliminates the need for pagination — breaking content up into multiple pages.

What is infinite scroll called?

Infinite scrolling is a technique that loads more content as you scroll. It allows you to continue scrolling indefinitely and is sometimes known as endless scrolling. Aza Raskin invented the mechanism whilst working at Humanized, a small user-interface company.


2 Answers

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.

like image 95
punov Avatar answered Oct 16 '22 01:10

punov


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.

like image 32
Marin Takanov Avatar answered Oct 16 '22 03:10

Marin Takanov