mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionRefresher
|
|
* @module ionic
|
|
* @restrict E
|
|
* @parent ionic.directive:ionContent, ionic.directive:ionScroll
|
|
* @description
|
|
* Allows you to add pull-to-refresh to a scrollView.
|
|
*
|
|
* Place it as the first child of your {@link ionic.directive:ionContent} or
|
|
* {@link ionic.directive:ionScroll} element.
|
|
*
|
|
* When refreshing is complete, $broadcast the 'scroll.refreshComplete' event
|
|
* from your controller.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```html
|
|
* <ion-content ng-controller="MyController">
|
|
* <ion-refresher
|
|
* pulling-text="Pull to refresh..."
|
|
* on-refresh="doRefresh()">
|
|
* </ion-refresher>
|
|
* <ion-list>
|
|
* <ion-item ng-repeat="item in items"></ion-item>
|
|
* </ion-list>
|
|
* </ion-content>
|
|
* ```
|
|
* ```js
|
|
* angular.module('testApp', ['ionic'])
|
|
* .controller('MyController', function($scope, $http) {
|
|
* $scope.items = [1,2,3];
|
|
* $scope.doRefresh = function() {
|
|
* $http.get('/new-items')
|
|
* .success(function(newItems) {
|
|
* $scope.items = newItems;
|
|
* })
|
|
* .finally(function() {
|
|
* // Stop the ion-refresher from spinning
|
|
* $scope.$broadcast('scroll.refreshComplete');
|
|
* });
|
|
* };
|
|
* });
|
|
* ```
|
|
*
|
|
* @param {expression=} on-refresh Called when the user pulls down enough and lets go
|
|
* of the refresher.
|
|
* @param {expression=} on-pulling Called when the user starts to pull down
|
|
* on the refresher.
|
|
* @param {string=} pulling-icon The icon to display while the user is pulling down.
|
|
* Default: 'ion-arrow-down-c'.
|
|
* @param {string=} pulling-text The text to display while the user is pulling down.
|
|
* @param {string=} refreshing-icon The icon to display after user lets go of the
|
|
* refresher.
|
|
* @param {string=} refreshing-text The text to display after the user lets go of
|
|
* the refresher.
|
|
*
|
|
*/
|
|
IonicModule
|
|
.directive('ionRefresher', ['$ionicBind', function($ionicBind) {
|
|
return {
|
|
restrict: 'E',
|
|
replace: true,
|
|
require: '^$ionicScroll',
|
|
template:
|
|
'<div class="scroll-refresher">' +
|
|
'<div class="ionic-refresher-content">' +
|
|
'<i class="icon {{pullingIcon}} icon-pulling"></i>' +
|
|
'<div class="text-pulling" ng-bind-html="pullingText"></div>' +
|
|
'<i class="icon {{refreshingIcon}} icon-refreshing"></i>' +
|
|
'<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
|
|
'</div>' +
|
|
'</div>',
|
|
compile: function($element, $attrs) {
|
|
if (angular.isUndefined($attrs.pullingIcon)) {
|
|
$attrs.$set('pullingIcon', 'ion-arrow-down-c');
|
|
}
|
|
if (angular.isUndefined($attrs.refreshingIcon)) {
|
|
$attrs.$set('refreshingIcon', 'ion-loading-d');
|
|
}
|
|
return function($scope, $element, $attrs, scrollCtrl) {
|
|
$ionicBind($scope, $attrs, {
|
|
pullingIcon: '@',
|
|
pullingText: '@',
|
|
refreshingIcon: '@',
|
|
refreshingText: '@',
|
|
$onRefresh: '&onRefresh',
|
|
$onPulling: '&onPulling'
|
|
});
|
|
|
|
scrollCtrl._setRefresher($scope, $element[0]);
|
|
$scope.$on('scroll.refreshComplete', function() {
|
|
$element[0].classList.remove('active');
|
|
scrollCtrl.scrollView.finishPullToRefresh();
|
|
});
|
|
};
|
|
}
|
|
};
|
|
}]);
|