I am developing an application for android and I use a framework called "Ionic Framework". Here is my problem I have to make a system with infinite scroll system framework of "ion-infinite-scroll".

When I did my tests on Chrome on my pc I have the ion-infinite-scroll that does not stop despite my position on the page.

How do I place my code so the system works? Thanks

Controller

$scope.loadMore = function(){
    console.log("LoadMOre");



    imageCache.init().then(function() {
        BonjourTwitterRepository.populate($scope);
    });
    $scope.$broadcast('scroll.infiniteScrollComplete');
    $scope.$broadcast('scroll.resize');



    console.log($scope.tweetsList);
    if(false){
        console.log("ok");
        $scope.noMoreItemsAvailable = true;

    }
    $scope.currentIndex = $scope.currentIndex + $scope.perPage;

};

Repository

var populateCollection = function (tweets, $scope) {
    collection = new TweetCollection();
    console.log($scope.currentIndex);
    for (var i = $scope.currentIndex; i < $scope.perPage; i++) {
        collection.addTweets(new Tweet(tweets[i], $scope, imageCache));

    }
    $scope.tweetsList = collection;

};

View

    <ion-item class="item item-body">
        <div class="item item-image">
            <img ng-src="{{tweet.media_url}}" src="img/loading1.gif"/>
        </div>
        <p>
            by : <a href="https//twitter/{{tweet.getUsername()}}">@{{tweet.getUsername()}}</a>
        </p>

    </ion-item>
    <div class="item tabs tabs-secondary tabs-icon-left">
        <p>
            <a href="#" class="rating-poll"><i class="icon-thumbs-up"></i></a>
            <a href="#" class="rating-poll"><i class="icon-thumbs-down"></i></a>
        </p>

        <p>
            <button ng-click="shareThis('{{tweet.media_url}}')" class="button icon button-clear "><i
                    class="icon ion-share"></i>Share
            </button>

        </p>


    </div>
</ion-list>
<ion-infinite-scroll></ion-infinite-scroll>

I am developing an application for android and I use a framework called "Ionic Framework". Here is my problem I have to make a system with infinite scroll system framework of "ion-infinite-scroll".

When I did my tests on Chrome on my pc I have the ion-infinite-scroll that does not stop despite my position on the page.

How do I place my code so the system works? Thanks

Controller

$scope.loadMore = function(){
    console.log("LoadMOre");



    imageCache.init().then(function() {
        BonjourTwitterRepository.populate($scope);
    });
    $scope.$broadcast('scroll.infiniteScrollComplete');
    $scope.$broadcast('scroll.resize');



    console.log($scope.tweetsList);
    if(false){
        console.log("ok");
        $scope.noMoreItemsAvailable = true;

    }
    $scope.currentIndex = $scope.currentIndex + $scope.perPage;

};

Repository

var populateCollection = function (tweets, $scope) {
    collection = new TweetCollection();
    console.log($scope.currentIndex);
    for (var i = $scope.currentIndex; i < $scope.perPage; i++) {
        collection.addTweets(new Tweet(tweets[i], $scope, imageCache));

    }
    $scope.tweetsList = collection;

};

View

    <ion-item class="item item-body">
        <div class="item item-image">
            <img ng-src="{{tweet.media_url}}" src="img/loading1.gif"/>
        </div>
        <p>
            by : <a href="https//twitter./{{tweet.getUsername()}}">@{{tweet.getUsername()}}</a>
        </p>

    </ion-item>
    <div class="item tabs tabs-secondary tabs-icon-left">
        <p>
            <a href="#" class="rating-poll"><i class="icon-thumbs-up"></i></a>
            <a href="#" class="rating-poll"><i class="icon-thumbs-down"></i></a>
        </p>

        <p>
            <button ng-click="shareThis('{{tweet.media_url}}')" class="button icon button-clear "><i
                    class="icon ion-share"></i>Share
            </button>

        </p>


    </div>
</ion-list>
<ion-infinite-scroll></ion-infinite-scroll>

• javascript
• android
• angularjs
• cordova
• ionic-framework

• this if(false) is for mistake or? – Marco Acierno Commented Apr 26, 2014 at 17:47
• this is just to test the code, if it is true with the variable $scope.noMoreItemsAvailable = true; the loop stop – Flug Commented Apr 26, 2014 at 17:50
• Are you sure that's your entire view.html ? There's a missing <ion-list> tag on top. Is there anything else? – motatoes Commented Aug 7, 2014 at 5:46

1 Answer 1

<ion-infinite-scroll 
      on-infinite="fetchTrucks()" 
      distance="10%">
</ion-infinite-scroll>

you are missing key attributes on your infinite-scroll directive

Example here http://codepen.io/aaronksaunders/pen/gDrev