diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index 1965f7e5c8..f321975f0f 100644
--- a/js/ext/angular/src/directive/ionicContent.js
+++ b/js/ext/angular/src/directive/ionicContent.js
@@ -211,7 +211,8 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
* @param {expression} on-infinite What to call when the scroller reaches the
* bottom.
* @param {string=} distance The distance from the bottom that the scroll must
- * reach to trigger the on-infinite expression. Default 1%.
+ * reach to trigger the on-infinite expression. Default: 1%.
+ * @param {string=} icon The icon to show while loading. Default: 'ion-loading-d'.
*
* @usage
* ```html
@@ -240,6 +241,7 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
* ```html
*
*
* ```
@@ -251,9 +253,10 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
template:
'
',
+ scope: true,
controller: ['$scope', '$attrs', function($scope, $attrs) {
this.isLoading = false;
this.scrollView = null; //given by link function
@@ -272,6 +275,12 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
var infiniteScrollCtrl = ctrls[1];
var scrollView = infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
+ var iconElement = $element[0].querySelector('.icon');
+
+ $scope.icon = function() {
+ return angular.isDefined($attrs.icon) ? $attrs.icon : 'ion-loading-d';
+ };
+
$scope.$on('scroll.infiniteScrollComplete', function() {
$element[0].classList.remove('active');
$timeout(function() {
diff --git a/js/ext/angular/test/directive/ionicInfiniteScroll.unit.js b/js/ext/angular/test/directive/ionicInfiniteScroll.unit.js
index 4bfff38f4c..ba17b364dd 100644
--- a/js/ext/angular/test/directive/ionicInfiniteScroll.unit.js
+++ b/js/ext/angular/test/directive/ionicInfiniteScroll.unit.js
@@ -32,7 +32,7 @@ describe('ionicInfiniteScroll directive', function() {
});
return element;
}
-
+
it('should error if no ionicScroll parent', function() {
expect(function() {
inject(function($compile, $rootScope) {
@@ -47,6 +47,28 @@ describe('ionicInfiniteScroll directive', function() {
expect(ctrl.isLoading).toBe(false);
});
+ describe('icon', function() {
+ it('should have default icon ion-loading-d', function() {
+ var el = setup();
+ var icon = angular.element(el[0].querySelector('.icon'));
+ expect(icon.hasClass('ion-loading-d')).toBe(true);
+ });
+
+ it('should allow icon attr blank', function() {
+ var el = setup('icon=""');
+ var icon = angular.element(el[0].querySelector('.icon'));
+ expect(icon.hasClass('ion-loading-d')).toBe(false);
+ });
+
+ it('should allow interpolated icon attr', function() {
+ var el = setup('icon="{{someIcon}}"');
+ var icon = angular.element(el[0].querySelector('.icon'));
+ expect(icon.hasClass('ion-loading-d')).toBe(false);
+ el.scope().$apply('someIcon = "super-icon"');
+ expect(icon.hasClass('super-icon')).toBe(true);
+ });
+ });
+
describe('getMaxScroll', function() {
it('getMaxScroll should default to 1%', function() {
var el = setup();