sroze / nginfinitescroll Goto Github PK

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?

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

Events are not triggered when within iFrame (Facebook App).

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

The first load will always error as it checks box for children, but the selector points to the scrollable div and not the table.

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;

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'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.

Add throttling documentation. It's a duplicate of #53 but a remember waiting #58.

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

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

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.

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

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.

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?

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)

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!

That will make installation and update a lot easier for developers.

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
  }
});

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

We have to merge the sroze/ngInfiniteScroll-bower repository here.

Waiting bower/bower#120

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.

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

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?

With animation on ng-view does not start the request for retrieving data and it does not show anything.

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?

I've been reading through the code and it seems like the dependency for jQuery is based on the use of the following methods...

• on()
• off()
• height()
• scrollTop()

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...

• bind() - on()
• unbind() - off()
• window.innerHeight - height()
• window.pageYOffset - scrollTop()

Do you see any reason for not replacing these jQuery dependencies with the alternatives presented?

Documentation of #7.

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?

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.

/edit:
sorry, my fault, android didnt load jquery from google cdn for whatever reason i not know.

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?

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.

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…

Nice module, thanks for your effort on this! Any possibility to make it work with iscroll?
https://github.com/cubiq/iscroll

Move the bower.json file is this repository and update the registred bower package.

Move documentation to readthedocs.org and remove the sroze/ngInfiniteScroll-site repository.

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.

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.

Hello I've tried to follow the steps of your gh-pages but the file ng-infinite-scroll.min.js is missing.
Thanks

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

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

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?

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 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?

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.

Hi in the bower install I get this warning

deprecated component.json