ionic-cordova-gulp-seed
Version:
Ionic & Cordova & Gulp seed with organized code, tests, bower support and some other stuff. Originated from ionic-angular-cordova-seed.
108 lines (105 loc) • 3.69 kB
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.
* @param {boolean=} disable-pulling-rotation Disables the rotation animation of the pulling
* icon when it reaches its activated threshold. To be used with a custom `pulling-icon`.
*
*/
IonicModule
.directive('ionRefresher', ['$ionicBind', function($ionicBind) {
return {
restrict: 'E',
replace: true,
require: '^$ionicScroll',
template:
'<div class="scroll-refresher" collection-repeat-ignore>' +
'<div class="ionic-refresher-content" ' +
'ng-class="{\'ionic-refresher-with-text\': pullingText || refreshingText}">' +
'<div class="icon-pulling" ng-class="{\'pulling-rotation-disabled\':disablePullingRotation}">' +
'<i class="icon {{pullingIcon}}"></i>' +
'</div>' +
'<div class="text-pulling" ng-bind-html="pullingText"></div>' +
'<div class="icon-refreshing"><i class="icon {{refreshingIcon}}"></i></div>' +
'<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
'</div>' +
'</div>',
compile: function($element, $attrs) {
if (angular.isUndefined($attrs.pullingIcon)) {
$attrs.$set('pullingIcon', 'ion-ios7-arrow-down');
}
if (angular.isUndefined($attrs.refreshingIcon)) {
$attrs.$set('refreshingIcon', 'ion-loading-d');
}
return function($scope, $element, $attrs, scrollCtrl) {
$ionicBind($scope, $attrs, {
pullingIcon: '@',
pullingText: '@',
refreshingIcon: '@',
refreshingText: '@',
disablePullingRotation: '@',
$onRefresh: '&onRefresh',
$onPulling: '&onPulling'
});
scrollCtrl._setRefresher($scope, $element[0]);
$scope.$on('scroll.refreshComplete', function() {
$scope.$evalAsync(function() {
scrollCtrl.scrollView.finishPullToRefresh();
});
});
};
}
};
}]);