Infinite scrolling?

[LarryK]

Anyone implement infinite scrolling with Angular? Any tips or
pointers?

Thanks.
ps. By infinite scrolling I mean add additional rows of data to the
bottom of a page when the user reaches what was the bottom of the
list.

[Vojta Jína]

Hey Larry,

here is a simple example for you
http://jsfiddle.net/vojtajina/U7Bz9/

V.

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to angular+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/angular?hl=en.
>

[LarryK]

That's terrific!

Thank you!

Larry

On May 16, 8:18 pm, Vojta Jína <vojta.j...@gmail.com> wrote:
> Hey Larry,
>

> here is a simple example for youhttp://jsfiddle.net/vojtajina/U7Bz9/

[Dan Doyon]

Vojta,

Is there magic happening here? I don't recall seeing that angular
auto-invokes a Main() method if found. In fact the documentation .
Undocumented feature?

--dan

-----
No virus found in this message.
Checked by AVG - www.avg.com
Version: 10.0.1424 / Virus Database: 2425/5009 - Release Date: 05/19/12

[Andy Joslin]

Dan, it's just that the scroll starts below the 0th item, so it automatically fires the event and adds more at start.

[Dan Doyon]

Andy,

 

Maybe, it’s just me, I just got back from the northeast. I understand how the scrolling code works. But it seems like Main($scope) is magically being called. I don’t see any ng-app, I don’t see any assignment of Main as a controller.  If I change it from Main to Foo I get “Error: Argument 'Main' is not a function, got undefined” in the FF console.  Am I missing something in jsFiddle?

 

Thx

 

--(jetlagged) dan

 

From: ang...@googlegroups.com [mailto:ang...@googlegroups.com] On Behalf Of Andy Joslin
Sent: Saturday, May 19, 2012 2:29 PM
To: ang...@googlegroups.com
Subject: [angular.js] Re: Infinite scrolling?

 

Dan, it's just that the scroll starts below the 0th item, so it automatically fires the event and adds more at start.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/wPf3jP4markJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Andy Joslin]

Ah, I didn't see that! I guess you're right.  Never seen that, you could look in the source for "Main" and figure it out though (I would but I don't have time atm)

[Dan Doyon]

I’m not finding it (I’ve searched git code and the angular file referenced in the fiddle) and since Javascript (from what I’ve read and tried) does not have a Main  method that autoexecutes, I’m now believing it to be nothing short of voodoo.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/FVSO3X8waCgJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Renan T. Fernandes]

the ng-app automagicly being the first non-ng module create is understandable, but what with the function? angular have a way to autodetect a strange created function and use it as the controller??

2012/5/19 Dan Doyon <dand...@yahoo.com>

--
Renan Fernandes(aka "ShadowBelmolve")

[Pawel Kozlowski]

Hi Dan, All,

On Sat, May 19, 2012 at 11:50 PM, Dan Doyon <dand...@yahoo.com> wrote:

> But it seems like Main($scope) is magically being
> called. I don’t see any ng-app, I don’t see any assignment of Main as a
> controller.  If I change it from Main to Foo I get “Error: Argument 'Main'
> is not a function, got undefined” in the FF console.  Am I missing something
> in jsFiddle?

There is no magic in angular involved here, it is just jsFiddle :-)

Click on the 'Info' (left-hand-side) and you will see the 'Body Tag'
input which has:

<body ng-app="scroll" ng-controller="Main">

so this is where angular.js gets bootstraped. Mystery solved!

Cheers,
Pawel

[Pawel Kozlowski]

Hi Renan!

On Sun, May 20, 2012 at 1:08 AM, Renan T. Fernandes
<re...@kauamanga.com.br> wrote:
> the ng-app automagicly being the first non-ng module create
> is understandable, but what with the function? angular have a way to
> autodetect a strange created function and use it as the controller??

As I've posted in response to Don there is no automatic thing in
angular, this is jsfiddle. You can bootstrap angular in the 'Info'
sidebar (http://doc.jsfiddle.net/basic/introduction.html#info) where
you can specify the 'Body Tag'. In the example jsFiddle it has value
of:

<body ng-app="scroll" ng-controller="Main">

Cheers,
Pawel

[Dan Doyon]

Doh! Must've been the jet lag cuz I've used that before

Thx

Sent from my iPhone

[Andy Joslin]

Haha, we all had a conspiracy theory going on. 

Thanks Pawel.

[Victor Stan]

If anyone interested in hooking up Angular JS infinite scroll to Rails pagination, I wrote up a blog about it, very simple. I go through a 'real-life' scenario...

http://specificidea.com/collection_items/blog/infinite-scroll-with-angularjs-and-rails/59 

[se...@bcode.com]

Hi all, 

On a related note... I was using this infinite scrolling example with some success. However I wanted to bind the scroll event to $window - a bit like Eamonn's example. Initially it all works well - until I try and use the directive inside a partial... because apparently the partial has no access to the global context (see here: https://groups.google.com/forum/?fromgroups=#!topic/angular/sQMa8vSSJA8) (The reason was that binding to the DOM element directly has issues unless you explicitly set a height which I don't want to do.)

So I wanted to know what the 'angular' way to address this might be... do I always have to call this directive from outside the partial??

Best regards....

Sean

On Friday, July 6, 2012 11:23:42 PM UTC+10, Eamonn O'Connell wrote:

I found an issue with binding to the window as the binding will stay on the window even if I change screens/templates.

Let's say I have a list screen/template, and bind on the scroll event of the window. Then I enter into a show/detail screen/template. the binding on window remains, and the corresponding handler will be called while scrolling in the show/detail screen. 

Does anyone have any hints or suggestions on this ? Is there a pattern for unbinding of events in angular ?

Thanks!

On Friday, 6 July 2012 11:31:11 UTC+2, Eamonn O'Connell wrote:

Another example of infinite scroll on the global window based on a JQuery plugin by Paul Irish. Doesn't quite work on JsFiddle, but is working in my app!

http://jsfiddle.net/34m0/yw5n6/3/

On Friday, 1 June 2012 20:25:46 UTC+2, evaneus wrote:

Here's another example,  I fiddled with Vojta's one to make one that doesn't use absolute positioning and uses window.innerHeight to see if the div is at the bottom of the page. It's probably better to keep it more modular as in Vojta's one, but I thought I'd share for the sake of another example...

http://jsfiddle.net/evaneus/r6n9v/1/

On Wednesday, May 9, 2012 10:48:36 AM UTC-4, LarryK wrote:

[mato...@gmail.com]

How can you push multiple items?

So install of pushing one at time, can you push an array of multiple items, without the for loop?

[Peter Bacon Darwin]

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push with multiple arguments 

or

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/concat

or

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/splice

On 5 October 2012 02:22, <mato...@gmail.com> wrote:

How can you push multiple items?

So install of pushing one at time, can you push an array of multiple items, without the for loop?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en.