Ionic Infinite outside ion-content with ion-pane

This pen shows the Github commits for the Ionic Framework as an infinite scroll list. It makes HTTP requests to load the data (may happen so fast you don't notice) but it only loads 30 items at a time. Please note that Github's API is rate limited, so you get 60 requests an hour unless you sign the request with Github's authentication. What is a ionic infinite outside ion-content with ion-pane How do you make a ionic infinite outside ion-content with ion-pane? This script and codes were developed by Felquis on 11 February 2022, Friday.

How do I make an ionic infinite outside ion-content with ion-pane?
  1. Ionic Infinite outside ion-content with ion-pane Previews
  2. Ionic Infinite outside ion-content with ion-pane HTML Codes
  3. Ionic Infinite outside ion-content with ion-pane CSS Codes
  4. Ionic Infinite outside ion-content with ion-pane JS Codes
Ionic Infinite outside ion-content with ion-pane Previews

Ionic Infinite outside ion-content with ion-pane HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Ionic Infinite outside ion-content with ion-pane</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <html ng-app="App">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Infinite Scroll</title>
   
    <link href="https://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js">
    </script>
  </head>

  <body ng-controller="Ctrl">
    <ion-pane ng-controller="Ctrl">

      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic GitHub Commits</h1>
      </ion-header-bar>
      
      <ion-content>
        
        <div class="list">
          <div class="item" ng-repeat="commit in commits">
            <h3 ng-bind-html="commit.commit.message | linkCommit"></h3>
            <p>{{commit.commit.author.name}}, {{commit.commit.author.date | date:'short'}}</p>
          </div>
        </div>
        
        <!-- Infinite Scroll is activated here to load if more pages exist. -->
        
      </ion-content>
      
      <ion-infinite-scroll on-infinite="loadGithubCommits()"></ion-infinite-scroll>
      
    </ion-pane>
      
  </body>
</html>
  
    <script src="js/index.js"></script>

</body>
</html>

Ionic Infinite outside ion-content with ion-pane CSS Codes

/* Ionic Infinite outside ion-content with ion-pane */

ion-infinite-scroll {
  height: 100%;
}

Ionic Infinite outside ion-content with ion-pane JS Codes

angular.module('App', ['ionic'])
.controller('Ctrl', function ($scope, $http, $ionicPopup, $filter) {
  
  var page = 1;
  $scope.commits = [];
  $scope.more = true;
  
  $scope.loadGithubCommits = function () {
    
    // Load the data from the github api. 
    $http.get('https://api.github.com/repos/driftyco/ionic/commits?page=' + page)
    .success(function (commits, status, headers) {
      
      // Check Link header to determine if more pages are available.
      // If not, disable infinite scroll.
      /*if (headers('link').search('rel="next"') < 0) {
        $scope.more = false;
      }*/
      
      // Push all of the commits from response into model.
      angular.forEach(commits, function (commit) {
        // $scope.commits.push(commit);
      });
    })
    
    .error (function (data, status, headers) {
      
      // Disable infinite scroll since we've got an error.
      $scope.more = false;
      
      if (headers('x-ratelimit-remaining') == 0) {
        
        // Check if it is due to Github rate limiting.
        var popup = $ionicPopup.alert({
          title: 'You have exceeded GitHub\'s Rate Limit.',
          template: 'Try again after ' + $filter('date')(parseInt(headers('x-ratelimit-reset')) * 1000, 'short')
        });
        
      } else {
        
        // Otherwise show general alert.
        $ionicPopup.alert({
          title: 'GitHub did not respond.',
          template: 'Please try again.'
        });
      }
    })
    
    .finally(function () {
      
      // On finish, increment to next page and alert infiniteScroll to close.
      page++;
      // $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
})

.filter('linkCommit', function () {
  
  return function (text) {
    
    // Replace any issue numbers with a link to the issue.
    return text.replace(/\#(\d+)/gmi, "<a href=\"https://github.com\/driftyco\/ionic\/issues\/$1\">\#$1<\/a>")
  };
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.