How to detect an "on scroll" event using angularJs & Ionic Framework

Question

I come from a JQuery background and don't know if this is possible or not in AngularJS.

I am working on a project using Ionic framework & AngularJS

I am trying to capture the "on scrolling" event using angular.

Currently I use the following HTML to create a list of 20 items and the following code outputs the "test" string on the console log on page load. But when I scroll up or down the list the event doesn't seem to fire again.

I've been researching but I can't seem to come across a way to get the "on scroll event" after the page has been loaded. At least directive doesn't get call when the user is interacting with the list, so I think this is the wrong approach.

How can I capture that event in angular? Is it possible?

HTML

<ion-content>
      <div class="list" >
        <div class="item" ng-repeat="item in data.items" when-scrolled="loadMore()" >Item {{item}}</div>
      </div>
      </ion-content>

JS

angular.module('starter.controllers', ["ionic"])
.controller('AppCtrl', function($scope,$ionicScrollDelegate) {

  $scope.myTitle = 'Template';

  $scope.data = {
    items : [],
    title : ''
  };

  for(var i = 0; i < 20; i++) {
    $scope.data.items.push(i);
  }
})
.directive('whenScrolled', function () {
    return function(scope, element, attrs) {
        console.log("test");
    };
});

I'm not sure I understand your approach. onscroll is an HTML event you can use to call any JavaScript, so why does <div onscroll="loadmore()"> not work? — Claies
– Claies, Commented Oct 8, 2015 at 11:20

Jonathan Thurft · Accepted Answer · 2015-10-08 13:08:11Z

1

This is what worked
I had to change the markup and the directives to work on Ionic library

http://codepen.io/anon/pen/WQOGZy

<ion-scroll direction="y" on-scroll="gotScrolled(this)" delegate-handle="homeScroll">
        <p>Stuff 1</p>
        <p>Stuff 2</p>
        <p>Stuff 3</p>
        <p>Stuff 4</p>
        <p>Stuff 5</p>
        <p>Stuff 6</p>
        <p>Stuff 7</p>
        <p>Stuff 8</p>
        <p>Stuff 9</p>
        <p>Stuff 10</p>
      </ion-scroll>

answered Oct 8, 2015 at 13:08

Jonathan Thurft

4,1718 gold badges50 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Georgi Kovachev Over a year ago

hi Jonathan. I am doing Dom manipulation in getScrolled function. And it is recommend to use angular directive for dom manipulation. how can I link on-scroll with directive?

Community · Accepted Answer · 2017-05-23 10:30:52Z

1

Is there any particular reason why you are creating your own directive ? Ionic already has scroll events if you want to load more data.
In those situation the best thing to do is to switch to collection-repeat.

collection-repeat allows an app to show huge lists of items much more performantly than ng-repeat.

It renders into the DOM only as many items as are currently visible.

This means that on a phone screen that can fit eight items, only the eight items matching the current scroll position will be rendered.

You can change your HTML using the new directive:

Item {{item}}

and add:

<ion-infinite-scroll ng-if="!theEnd" on-infinite="loadMore()" distance="50%"></ion-infinite-scroll>

before the closing tag of your content </ion-content>.

The directive will be in charge to fetch the data for you.

I am suggesting to use collection-repeat but the same principle can be applied to ng-repeat as well. The first one is just faster when it deal with lot of data.

Your controller should look something like this:

$scope.loadMore = function(argument) {
        page++;
        dataService.GetData(page, pageSize)
          .then(function(result) {
            console.log('items fetched: ' + result.data.length);
            if (result.data.length > 0) {
                angular.forEach(result.data, function(value, key) {
                  $scope.data.items.push(value);
                });
            }
            else {
                $scope.theEnd = true;
            }
        })
        .finally(function() {
            $scope.$broadcast("scroll.infiniteScrollComplete");
        });
 };

You have to remember to broadcast the event scroll.infiniteScrollComplete at the end of your fetch process.

You can read more on this topic here.

Or play with this sample here.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Oct 8, 2015 at 13:09

LeftyX

35.6k21 gold badges140 silver badges201 bronze badges

2 Comments

Jonathan Thurft Over a year ago

Thanks for that!.. No, there is no particular reason. I am just new to Angular and Ionic and is what i kept seeing around. I am only showing 12 items so an infinite scroll doesn't really apply. Do you know how can I also know which item is at the middle of the container?

LeftyX Over a year ago

I am afraid I don't. Sorry.

Akshay Kumar · Accepted Answer · 2015-10-08 11:27:55Z

0

You can define the directive as,

app.directive('ngScroll', function() {
return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {
        element.bind("onscroll", function(event) {
            scope.$apply(attrs.ngScroll);
        });
    }
  };
});

And html as,

<div class="item" ng-repeat="item in data.items" ng-scroll="loadMore()" >Item {{item}}</div>
  </div>

answered Oct 8, 2015 at 11:27

Akshay Kumar

5762 silver badges10 bronze badges

1 Comment

Jonathan Thurft Over a year ago

i put a console.log inside the bind and it never gets called when i scroll up or down

Code Spy · Accepted Answer · 2017-04-01 19:01:35Z

0

we can use on-scroll or on-scroll-complete events on content then we need to call a function in the controller like below

<ion-view view-title="Wall">
    <ion-content **on-scroll-complete="checkScroll()"**>
        <div class="list" ng-repeat="w in data.wallList">
        </div>
    </ion-content>
</ion-view>

Complete tutorial is given here http://freakyjolly.com/detect-ionic-view-page-bottom-load-infinite-data/

answered Apr 1, 2017 at 19:01

Code Spy

9,9744 gold badges72 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to detect an "on scroll" event using angularJs & Ionic Framework

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related