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
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.
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With