Ionic ion-refresher ion-infinite-scroll 自定义loading动画

.directive('ionRefresher', [function() {
return {
restrict: 'E',
replace: true,
require: ['?^$ionicScroll', 'ionRefresher'],
controller: '$ionicRefresher',
template:
'<div class="scroll-refresher invisible" 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">' +
'<ion-spinner ng-if="showSpinner" icon="{{spinner}}"></ion-spinner>' +
'<i ng-if="showIcon" class="icon {{refreshingIcon}}"></i>' +
'</div>' +
'<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
'</div>' +
'</div>',
link: function($scope, $element, $attrs, ctrls) {

// JS Scrolling uses the scroll controller
var scrollCtrl = ctrls[0],
refresherCtrl = ctrls[1];
if (!scrollCtrl || scrollCtrl.isNative()) {
// Kick off native scrolling
refresherCtrl.init();
} else {
$element[0].classList.add('js-scrolling');
scrollCtrl._setRefresher(
$scope,
$element[0],
refresherCtrl.getRefresherDomMethods()
);

$scope.$on('scroll.refreshComplete', function() {
$scope.$evalAsync(function() {
scrollCtrl.scrollView.finishPullToRefresh();
});
});
}

}
};
}]);

.directive('ionInfiniteScroll', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: ['?^$ionicScroll', 'ionInfiniteScroll'],
template: function($element, $attrs) {
if ($attrs.icon) return '<i class="icon {{icon()}} icon-refreshing {{scrollingType}}"></i>';
return '<ion-spinner icon="{{spinner()}}"></ion-spinner>';
},
scope: true,
controller: '$ionInfiniteScroll',
link: function($scope, $element, $attrs, ctrls) {
var infiniteScrollCtrl = ctrls[1];
var scrollCtrl = infiniteScrollCtrl.scrollCtrl = ctrls[0];
var jsScrolling = infiniteScrollCtrl.jsScrolling = !scrollCtrl.isNative();

// if this view is not beneath a scrollCtrl, it can't be injected, proceed w/ native scrolling
if (jsScrolling) {
infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
$scope.scrollingType = 'js-scrolling';
//bind to JS scroll events
scrollCtrl.$element.on('scroll', infiniteScrollCtrl.checkBounds);
} else {
// grabbing the scrollable element, to determine dimensions, and current scroll pos
var scrollEl = ionic.DomUtil.getParentOrSelfWithClass($element[0].parentNode, 'overflow-scroll');
infiniteScrollCtrl.scrollEl = scrollEl;
// if there's no scroll controller, and no overflow scroll div, infinite scroll wont work
if (!scrollEl) {
throw 'Infinite scroll must be used inside a scrollable div';
}
//bind to native scroll events
infiniteScrollCtrl.scrollEl.addEventListener('scroll', infiniteScrollCtrl.checkBounds);
}

// Optionally check bounds on start after scrollView is fully rendered
var doImmediateCheck = isDefined($attrs.immediateCheck) ? $scope.$eval($attrs.immediateCheck) : true;
if (doImmediateCheck) {
$timeout(function() { infiniteScrollCtrl.checkBounds(); });
}
}
};
}]);

template:
'<div class="scroll-refresher invisible" collection-repeat-ignore style="text-align:center;">' +
'<img src="./img/ui_three/is-loading.gif"></img>'+
'</div>',

template: function($element, $attrs) {
**return '<ion-spinner icon="{{spinner()}}"></ion-spinner>';**
},