Available in:

Ionic-Angular 0.9.0
Ionic 0.9.0

Content

Ionic provides easy to use content area directives for use in AngularJS projects that can be configured to use Ionic's custom Scroll View, or use the built in overflow scrolling of the browser.

While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling.

When using the Ionic scroll features, you'll get pull-to-refresh, customizable scroll mechanics (like bounce easing, momentum acceleration, etc.) which aligns Ionic with native SDKs that give you access to scroll behavior. You'll also get events while in a momentum scroll, which -webkit-overflow-scrolling: touch will not, making it of limited use in real applications.

Also, we are working on virtual list rendering which will only work when using Ionic's scroll view. That is on the upcoming roadmap.

<ion-content>

Attribute Type Default Description
scroll boolean true Whether to allow scrolling of content.
overflow-scroll boolean false Whether to use default browser scrolling instead of ionic scroll . If true, then refreshers, bouncing, etc may stop working.
padding boolean false Whether to add padding to the content.
has-header boolean false Whether to offset the content for a header bar.
has-subheader boolean false Whether to offset the content for a header bar and sub-header bar.
has-footer boolean false Whether to offset the content for a footer bar.
has-tabs boolean false Whether to offset the content for a bottom-tabs bar.
has-bouncing boolean false on Android, true otherwise. Whether the scroll view should allow bouncing past the edges of content.
on-scroll expression Expression to evaluate when the user scrolls content.
on-scroll-complete expression Expression to evaluate when the user completes a scrolling action.

<ion-content> also supports options to pass to scrollView: startX, startY, scrollbarX, scrollbarY, scrollingX, scrollingY, scrollEventInterval.

<ion-refresher>

Attribute Type Default Description
on-refresh expression Expression to evaluate on refresh completion.
on-pulling expression Expression to evaluate when refresher is opening.
pulling-icon string ion-arrow-down-c The icon to display while the user is pulling down.
pulling-text string The text to display while the user is pulling down.
refreshing-icon string ion-loading-d The icon to display after user lets go of the refresher.
refreshing-text string The text to display after the user lets go of the refresher.

Ionic-Angular Usage

The <ion-content> directive can be used anywhere to define a scrollable content area. Here is an example with many of its available options:

<body ng-controller="ContentCtrl">
  <ion-header-bar title="'Header'">
  </ion-header-bar>

  <!-- content area -->
  <ion-content
    has-header="true"
    has-footer="true"
    scroll="true"
    >

    <!-- for pull to refresh -->
    <ion-refresher
     on-refresh="onRefresh()"
     >
    </ion-refresher>

    <!-- content -->
  </ion-content>

  <ion-footer-bar>
    <div class="title">Footer</div>
  </ion-footer-bar>
</body>

And an example controller:

angular.module('myModule', [])
.controller('ContentCtrl', function($scope, Users) {
  $scope.onRefresh = function() {
    // Load content
    Users.load().then(function(users) {
      $scope.users = users;

      // Trigger refresh complete on the pull to refresh action
      $scope.$broadcast('scroll.refreshComplete');
    });
  };
});

Dynamic content resizing

If the content of your scroll area changes, we can tell the content area to resize and update itself:

$scope.$broadcast('scroll.resize');

Pull to Refresh

Pull to refresh is an incredibly common UI paradigm found in mobile apps these days. If you want to add pull to refresh to your scroll area, you can just add the <ion-refresher> element to the beginning of the scroll content:

  <!-- content area -->
  <ion-content>
    <ion-refresher on-refresh="onRefresh()"></ion-refresher>
  </ion-content>

This will give you a default icon and animation style. To customize the pull to refresh, supply your own content to attributes of <ion-refresher>:

  <!-- content area -->
  <ion-content>
    <ion-refresher
     on-refresh="onRefresh()"
     pulling-icon="ion-loading-c"
     pulling-text="Pull to refresh..."
     >
    </ion-refresher>
  </ion-content>

Hint: Ionicons comes with animated icons.

When refreshing is complete, you'll need to tell the scroll view to stop the refresh. To do this, trigger an event either up or down the scope chain to the scroll view. If your controller is "above" the scroll view in the scope chain, use broadcast:

$scope.$broadcast('scroll.refreshComplete');

Use $scope.$emit if the scroll view is above your controller.