Sneak Peeking 1.2.2: Pull Hook (or Pull to Refresh)

Andi Pavllo
Feb 16, 2015 · 3 min read

As you know, we are entering the final stretch of the Onsen UI 1.2.2 release, that’s why, after the introduction of the Lazy Repeat feature, we want to introduce another new feature of this release. The Pull Hook feature can be accessed using the <ons-pull-hook> tag.

This feature is very convenient for fetching data from external sources (like a database, RSS feed or web API) into our application, when the user wants to check for updates. It is also a very convenient feature for the developer, since it allows to “hide” the fetching process of big amounts data with a nice graphical interface that gives to the user an impression of a shorter waiting time.

We will discuss soon how to use this feature, for now take a look at the sample and try to use the Pull Hook feature.

Let’s take a look at the code, to understand how the feature is used.

How to use Pull Hook

In this sample application, each time the user uses the <ons-pull-hook> element, the application gets information from a web API and puts it into an <ons-list-item>, contained in a <ons-list>.


The behavior of the <ons-pull-hook> element is defined inside this AngularJS controller:

As you can see, we have a variable called $scope.items. This variable is the array that will contain the elements that we will display in the <ons-list>. We have also two functions: $scope.load() and $scope.reset().

$scope.load() is the function that implements the <ons-pull-hook> behavior and takes as input argument $done, a function that tells the <ons-pull-hook> when the loading is completed.

With a $http.jsonp call we can get the data from a web API and store them inside the array $scope.items. It also generates a random value. This value will be used inside the HTML to retrieve a random image from another website.

$scope.reset() is the function that implements the <ons-toolbar-button> behavior and it just empties the $scope.items variable.


This is the HTML markup associated with the <ons-pull-hook> element.

It contains two attributes: ng-action="load($done)", which is the action associated with pulling down the element, and var="loader". This variable is used to check to <ons-pull-hook> status, via ng-switch="loader.getCurrentState()".

There are three potential states, each one associated with a customizable graphical representation:

  • initial: default state before any user interaction, the element remains in this status until it’s totally dragged down, going beyond its height limit.
  • preaction: is the state that follows the initial one and persists until the element is not totally dragged down, going beyond its height limit (different from the previous one) or it’s released.
  • action: it’s the final, the one in which the behavior of the <ons-pull-hook> element is executed.

Of course, with CSS3 animated transitions can also be used to make an even smoother user experience.


As you can see, is extremely easy to use this new Onsen UI feature. We have offered only one of the possible implementations of it, but we are sure that you will be able to find innovative ways to use it! You can find the full code in GitHub and a working full browser sample at this link.

The Onsen UI 1.2.2 release is getting closer every day. Stay tuned for exciting updates!

Originally published at on February 16, 2015.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store