View Source Improve this doc

ons-pull-hook

Component that adds "pull-to-refresh" to an element.

Usage # 

<script>
  ons.bootstrap()

  .controller('MyController', function($scope, $timeout) {
    $scope.items = [3, 2 ,1];

    $scope.load = function($done) {
      $timeout(function() {
        $scope.items.unshift($scope.items.length + 1);
        $done();
      }, 1000);
    };
  });
</script>

<ons-page ng-controller="MyController">
  <ons-pull-hook var="loaded" ng-action="load($done)">
    <span ng-switch="loader.getCurrentState()">
      <span ng-switch-when="initial">Pull down to refresh</span>
      <span ng-switch-when="preaction">Release to refresh</span>
      <span ng-switch-when="action">Loading data. Please wait...</span>
    </span>
  </ons-pull-hook>
  <ons-list>
    <ons-list-item ng-repeat="item in items">
      Item #{{ item }}
    </ons-list-item>
  </ons-list>
</ons-page>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
var String Variable name to refer this component. Optional
disabled If this attribute is set the "pull-to-refresh" functionality is disabled. Optional
ng-action Expression Use to specify custom behavior when the page is pulled down. A $done function is available to tell the component that the action is completed. Optional
on-action Expression Same as ng-action but can be used without AngularJS. A function called done is available to call when action is complete. Optional
height String Specify the height of the component. When pulled down further than this value it will switch to the "preaction" state. The default value is "64px". Optional
threshold-height String Specify the threshold height. The component automatically switches to the "action" state when pulled further than this value. The default value is "96px". A negative value or a value less than the height will disable this property. Optional
ons-changestate Expression Allows you to specify custom behavior when the "changestate" event is fired. Optional

Methods Summary #

Signature Description
setDisabled(disabled) Disable or enable the component.
isDisabled() Returns whether the component is disabled or enabled.
setHeight(height) Specify the height.
setThresholdHeight(thresholdHeight) Specify the threshold height.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary #

Name Description
changestate Fired when the state is changed. The state can be either "initial", "preaction" or "action".

Methods

setDisabled(disabled) #

Disable or enable the component.

Parameters
Name Type Description
disabled Boolean If true the pull hook will be disabled.

isDisabled(): Boolean #

Returns whether the component is disabled or enabled.

Returns: true if the pull hook is disabled.

setHeight(height) #

Specify the height.

Parameters
Name Type Description
height Number Desired height.

setThresholdHeight(thresholdHeight) #

Specify the threshold height.

Parameters
Name Type Description
thresholdHeight Number Desired threshold height.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

changestate #

Fired when the state is changed. The state can be either "initial", "preaction" or "action".

Parameters
Name Type Description
event Object Event object.
event.pullHook Object Component object.
event.state String Current state.

Discussion #