sroze / nginfinitescroll Goto Github PK
View Code? Open in Web Editor NEWInfinite Scrolling for AngularJS
Home Page: http://sroze.github.com/ngInfiniteScroll/
License: MIT License
Infinite Scrolling for AngularJS
Home Page: http://sroze.github.com/ngInfiniteScroll/
License: MIT License
Greetings,
I'm trying to use $resource to retrieve my data instead of the $http in the exemple.
And i can't get it to work properly.
Maybe this has to do with that fact: "It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data."
Found the same question on stackoverflow : http://stackoverflow.com/questions/22900067/using-nginfinitescroll-on-resource
Thanks for your help.
Hi
we had a situation that infinite scroll is not working only on FX and IE, I checked the source code it is because shouldScroll
is always false, cannot be true even scrolling to the bottom, is it because jquery height
function is getting different values on different browsers ? Does anyone see similar issue before ?
Thanks
Leo
With animation on ng-view does not start the request for retrieving data and it does not show anything.
Move the bower.json
file is this repository and update the registred bower package.
between the ng-repeat div tags,
I am supposed to have div.cover_container.fetched elements.
I want to attach event handlers on them, but I cannot do so because sometimes they are not finished loading.
Even though I place the code inside the success part:
$http.get(url).success(function(data, status, headers, config) {
var items = data.stories;
this.maxLimit = data.paging.count;
for (var i = 0; i < items.length; i++) {
if (this.items.length < this.maxLimit) {
this.items.push(items[i]);
}
}
activateGear();
the activateGear is the function that will attach the event handler on the repeated elements.
UPDATE:
I got what I wanted by using setInterval. Not the best ideal way. I am hoping for a better solution.
MyWorks.prototype.nextPage = function() {
if (this.busy) return;
this.busy = true;
var url = "/my_works?page=" + this.page + "&top=" + this.perPage + "&callback=JSON_CALLBACK";
$http.defaults.headers.get = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
$http.get(url).success(function(data, status, headers, config) {
var items = data.stories;
this.maxLimit = data.paging.count;
for (var i = 0; i < items.length; i++) {
if (this.items.length < this.maxLimit) {
this.items.push(items[i]);
}
}
this.page = parseInt(this.items.length / this.perPage) + 1;
// this is the crucial setInterval part
var currentMyWorks = this;
var theIntervalId = setInterval(function() {
if (currentMyWorks.busy == false) {
activateGear();
clearInterval(theIntervalId);
}
}, 300);
this.busy = false;
Documentation of #7.
Move documentation to readthedocs.org and remove the sroze/ngInfiniteScroll-site repository.
Hi
I tried to create like a buffer as close to the bottom of browser as possible but I cannot. I check In line 15 it makes the infinite-scroll-distance
as a integer even if i put like 0.05. I was wondering why is that to make it as a integer ? I try to make $window.height() * scrollDistance
as small as possible but set scrollDistance
to be an integer make it little bit hard.
Thanks
Leo
Just as John Resig mentions here http://ejohn.org/blog/learning-from-twitter/ you should include a settimeout/cleartimeout pattern to avoid perf issues. The article mentions setinterval but I think timeout works better
Hi
I ran into an issue that the entire infinite scroll is not working, and I figured out the reason which is the scroll event handler never get executed. Because my content DOM is deep inside of the entire DOM structure, and scroll event is not bubbling up, thus the event handler never get triggered, Since the event handler is registered on $window
object.
I suggest a solution which is created another attribute to specify the scrolling target used ID on the directive, and if it is defined registered the scroll event handler on that, if not use the $window
.
Any suggestions ?
Thanks!
Leo
When fetching data from an external resource I will sometime see multiple calls being fired by ngInfiniteScroll.
This usually happens when there's a small delay before the data is retrieved and the user continues to scroll down.
A simple work around is to create a timeout that ensures at least 300ms (in my case) passes between calls.
Though a better solution would be to wait for the promise of the data to be resolved. I'm just not sure how to pass that data back into the service.
I can post my timeout fix but it's really straightforward.
I want to create a little chat window that initially shows the latest messages, but when scrolling upwards should show the previous ones as well.
This is my gist.
https://gist.github.com/simkimsia/7214074
I want to update the height of another DOM element based on the $scope.my_works.page.
How do I do that without using jquery? I want to maintain the use of angularjs
Hello I've tried to follow the steps of your gh-pages but the file ng-infinite-scroll.min.js is missing.
Thanks
Events are not triggered when within iFrame (Facebook App).
Hi in the bower install I get this warning
deprecated component.json
Hi, I met a problem when using ngInfiniteScroll and directives at the same time. It will load twice of the data when scroll to the bottom. I don't know what to search for the solution. Could you help?
e.g.
<div ng-app='myApp' ng-controller='DemoController'>
<test infinite-scroll='reddit.nextPage()' infinite-scroll-disabled='reddit.busy' infinite-scroll-distance='1'>
<div ng-repeat='item in reddit.items'>
<span class='score'>{{item.score}}</span>
<span class='title'>
<a ng-href='{{item.url}}' target='_blank'>{{item.title}}</a>
</span>
<small>by {{item.author}} -
<a ng-href='http://reddit.com{{item.permalink}}' target='_blank'>{{item.num_comments}} comments</a>
</small>
<div style='clear: both;'></div>
</div>
<div ng-show='reddit.busy'>Loading data...</div>
</test>
</div>
.directive('test', function() {
return {
template: '<div ng-transclude></div>',
transclude: true
}
});
hey this is amazing plugin ,how about including angular-loading-bar to make it more awesome. I have tried it and it just works with ngInfiniteScroll.
Thanks
In Chrome 34.0.1847.116 beta, $(window).height() is returning the height of the window outside of the viewing area, instead of the inner height. This means scrolling /always/ triggers loading of more elements. Replacing with window.innerHeight fixes things.
infinite-scroll-immediate-check populates data, but if it doesn't populate enough, it will not work.
i.e. it would take two loads to produce enough data to fill the windows.
If after an immediate-check, it did another to verify there is enough data, this would be great.
This should be consistent with jquery dataType: script.
This is specifically needed to get Rails to render a .js view (Processing foo as JS)
The first load will always error as it checks box for children, but the selector points to the scrollable div and not the table.
The project logo indicates it does :), but I cannot find any reference or hooks that allow me to.
I want to implement (near) infinite scroll to the bottom and the top. At some point the stream would be exhausted. But how to implement this? Can ngInfiniteScroll
even help me with that?
Is it possible to bind infiniteScrollComponent to div's scroll instead of window scroll by changing configuration?
First, thanks for an awesome resource, love it! I got it up and running in no time :) Second, have you given any thought to trimming hidden records (outside the scroll area) for better performance? This pattern is popular for mobile performance and given the overhead of Angular data binding I wonder if it might be the best approach? Paul @ StackFull has a couple great blog posts on the topic where he's given a lot of thought to this, however he doesn't go so far as to produce a production ready solution (tables don't render correctly for example). I'd attempt to merge your work and his for a complete solution, but I'm afraid I don't quite have the chops to handle it all, however I'd be more than happy to contribute anywhere I can. Anyway, is this approach is on your radar?
Hi,
I've tried this plugin but I don't get it work...
Here's my service:
app.factory('galleryService', function($http) {
var gallery= function() {
this.items = [];
this.busy = false;
this.after = '';
};
gallery.prototype.loadMore = function() {
if (this.busy) return;
this.busy = true;
var url = "http://localhost/apps/test/images/getList" + this.after;
$http.jsonp(url).success(function(data) {
var items = data.data.children;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i].data);
}
this.after = "t3_" + this.items[this.items.length - 1].id;
this.busy = false;
}.bind(this));
};
return gallery;
});
If I look in firebug, I see an ajax request with a json return, but I doens't see it in my app.
gallery.items = is always empty.
I'm most familiar with jQuery and very little on angularJs.
Basically I have div elements that contain data fetched by the infinite scroll.
I want to attach event listeners to these div elements.
Currently the way I am doing it is to use jQuery.
I made sure that the elements contain at least a fetched
class in the html.
Everytime there is a successful $http.get, I will run a function that will execute
$("div.something.fetched").mouseenter(...
and at the end of that event handler, I will remove the fetched class.
Is there a better way to do this without jQuery?
I followed the steps given in http://binarymuse.github.io/ngInfiniteScroll/ .
But the scroll event is not fired ,so I am able to see a fixed no. of items only.
markup:
div infinite-scroll="LoadMoreItems()" infinite-scroll-disabled="false"
script:
$scope.count = 2;
$scope.lastCount = 0;
function LoadMoreItems() {
angular.extend($scope.items, $scope.allItems.slice($scope.lastCount, $scope.lastCount + $scope.count));
$scope.lastCount += $scope.count;
}
I also invoked LoadMoreItems() at the time when I loaded $scope.allItems in pageload.
No error is also coming.
Is there anything which I am missing here?
Suggestion for improvement:
In order to support scrolling nicely in tables with headers, it would be helpful if an element different from $window
could be specified as the scroller target.
In this example, the scrolling table resides inside a div
that has an absolute position and auto overflow; unfortunately, infinite scrolling does not work as expected:
http://embed.plnkr.co/VkyFpoJgTnN8KCc8gUa9
/edit:
sorry, my fault, android didnt load jquery from google cdn for whatever reason i not know.
Hi All,
ngInfiniteScroll works on Entire page but I have multiple bootstrap panels in my page, how would I use this plugin for each and every panel in page.
I noticed that version 1.0.1 is now using isolated scopes, which collide with other directives that are using isolated scopes as well.
I think 1.0.1 should be 1.1 as per semver specifications, shouldn't it?
I needed to make this work for fixed position divs and made some modifications. Note $parent and $child.
https://gist.github.com/clouddueling/6452758
Just wanted to share this change I made to make it work for me.
I'm in need of using ngInfiniteScroll for a gallery in a modal, but it seems not to work. It does not accept to scroll in this Bootstrap UI modal. Do you know any way to do this, pls let me know! Thanks.
https://www.dropbox.com/s/b7c5lcnofiq2q1n/Screenshot%202014-04-04%2001.22.14.png
http://angular-ui.github.io/bootstrap/#/modal
at link (http://localhost:9000/components/ngInfiniteScroll/ng-infinite-scroll.js:45:17)
$window.on('scroll', handler);
and $window.on('scroll', handler);
using angularjs 1.0.7 , ngInfiniteScroll 1.0.0
It is only set to true on error, or if defaulted to true in the options.
This means every time the user scrolls at the end of the list the loading image comes up and a request is made, even if there is no more data.
We have to merge the sroze/ngInfiniteScroll-bower repository here.
Waiting bower/bower#120
I have a set of chapters of a book that I'm using this directive to load the next chapters.
I there a chance to add a functionality to set the current viewable chapter? So I can change the URL and the page title accordingly?
I seem to suffer from the repeated calls mentioned in the FAQ, but so far I haven't been able to solve it just by placing a div with clear both at the end / after the container.
Here's my Plunker, am I missing something?
That will make installation and update a lot easier for developers.
Hi, thanks for this great angular directive!
Sorry but i was not able to create a working jsfiddle. I accept directions to acomplish it, here is address of a wip: http://jsfiddle.net/lsborg/nck2a/3/.
I had infinite-scroll-disabled bound to a scope variable, and even after checking its value became true, the infinite-scroll expression is still evaluated.
Any help?
Hi,
Not sure if i have something wrong setup here... I have followed your demo code and structured mine in the same way. When i first load my page all is well, though with every click of the mouse wheel i am finding that my infinite-scroll
method is being fired, even when i am at the top of the page. I have a distance of 1 set, though have tried changing this.
I put a console.log output inside the handler function to output the value of shouldScroll
and in my console window I see it outputs true
and then false
for each scroll movement.
any idea what may be causing this?
cheers
Hello i'm getting this error:
error: 'undefined' is not a function (evaluating 'n.height()')
when using infinite scroll. I'm using a ul list and repeated items are li elements. May be that the source of this problem is the height of each li item? currently there is not a fixed height for each item, so may be infinite scroll has some problems with this…
Thanks for the very useful lib!
I'm attempting to adapt the Reddit remote data-loading demo for my application, and I'm having difficultly understanding the part of the nextPage code that is triggered by the scrolling. Specifically, in the last line:
Reddit.prototype.nextPage = function() {
if (this.busy) return;
this.busy = true;
var url = "http://api.reddit.com/hot?after=" + this.after + "&jsonp=JSON_CALLBACK";
$http.jsonp(url).success(function(data) {
var items = data.data.children;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i].data);
}
this.after = "t3_" + this.items[this.items.length - 1].id;
this.busy = false;
}.bind(this)); // <-- Why is this necessary?
};
What does the '.bind(this));' accomplish and why is it necessary? I'm not able to decipher this from the source code.
(Also, is this a reasonable place to ask this, or should I kick over to a stackoverflow or the google group?)
Thanks again!
I would like to share my experience using the plugin.
I got a lot of calls calling my pagination while scrolling anywhere in the window.
I had this :
<div style="height: 100%" infinite-scroll="pagerFunction()">
<div ng-repeat="elem in elems">
</div>
</div>
but it was calling a lot of pagerFunction()
. Similar behaviour to current FAQ Why is ngInfiniteScroll triggering my expression on every single scroll event?
.
InfiniteScroll seems to use the div offset top and height. As I use height: 100%
I had to wrap in an additional div
like this :
<div style="height: 100%">
<div infinite-scroll="pagerFunction()">
<div ng-repeat="elem in elems">
</div>
</div>
</div>
Maybe this can help others if put in FAQ.
I've been reading through the code and it seems like the dependency for jQuery is based on the use of the following methods...
From my understanding, all of these methods have suitable replacements either in vanilla javascript or angularjs's jqLite. Here is a list of the replacements...
Do you see any reason for not replacing these jQuery dependencies with the alternatives presented?
Hello everyone, I started trying to use this directive as it comes from the repo, but it wasn't working it was complaining about lines like these one
$window.on 'scroll', handler
elem.offset()
(https://github.com/BinaryMuse/ngInfiniteScroll/blob/master/src/infinite-scroll.coffee#L51 and https://github.com/BinaryMuse/ngInfiniteScroll/blob/master/src/infinite-scroll.coffee#L39 repectively)
I was saying that [object object] doesn't have the method 'on' (for $window) and same for elem (it was complaining about the 'offset').
I had to modify this variables to make it work:
$window = $(window) #before it was $window = angular.element($window)
$elem = $(elem) #now I call $element instead of just element
Do I have to configure something else out of ng-infinite-scroll to make it work without making those modifications?
Nice module, thanks for your effort on this! Any possibility to make it work with iscroll?
https://github.com/cubiq/iscroll
I'm sorry, but I found it hilarious mentality that in order to avoid conflicts with the frameworks namespace you chose not to use a namespace whatsoever. That's an anti-pattern.
Just adopt is-
or something.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.