$ionicLoadingConfig -> changing the defaults

ionic-v1
1

I really like the concept of the $ionicLoadingContent as documented. I want to be able to customize the $ionicLoading, but generalize it for all loading screens to keep it DRY. One thing I have noticed is that the docs are pretty minimal in this area. I was considering sending a PR to at least list the other options, besides template. I’m not sure how stable those options are, however.

My question: is anyone changing the defaults effectively? I tried chaining the constant described in the docs to my module and updating options like showBackdrop: false. In my controller in question, I have added $ionicLoading as a parameter to the function and I am calling bare $ionicLoading.show();. I do not see any change locally.

Any suggestions?

2

See the doc for the object that you want customize in this case http://ionicframework.com/docs/api/service/$ionicLoading/ and then use ionicLoading and test, i don’t test but this can work.

Or use html tags example

content: '<i class="icon ion-loading-c"></i>',

You can always customize with css.

3

@Norwill Thanks for your reply. I think you are misunderstanding my question: I am asking about the $ionicLoadingConfig docs here. I understand that one can edit $ionicLoading. What the docs intimate is that you can “Set the default options to be passed to the $ionicLoading service.”

This would leave me to believe that I could set the options in one place in a constant and not have to redefine the options everywhere I want to use the loader – I want to keep it D.R.Y.

I am asking if this is the case and if anyone has had any success setting the options on this service.

4

Was a misunderstanding, i dont use $ionicLoadingConfig, for keep it D.R.Y i create a service when define the setting to $ionicLoading and call from anywhere on my app.

I hope this will be useful.

Greetings

5

@Norwill interesting! Would you mind posting a sample of what overriding the$ionicLoading looks like either here or in a codepen? That way anyone else who finds this thread (and I) can learn from what you’re doing.

Thanks!

I’m still curious if anyone has essentially done the same thing but with $ionicLoadingConfig

6

I take from here

This is mi code

Service
.factory('LoaderService', function($rootScope, $ionicLoading) {
    return {
        show : function() {

            $rootScope.loading = $ionicLoading.show({
                content: '<i class="icon ion-loading-c"></i>',
                animation: 'fade-in',
                showBackdrop: true,
                minWidth: 200,
                showDelay: 10
            });
        },

        hide : function(){
            $ionicLoading.hide();
        }
    }
});

Controller
.controller('MyCtrl', function($scope, $timeout, $rootScope, LoaderService, OtherService) {
    LoaderService.show();
    
	OtherService.getData(function(dataResponse) {
        $scope.data = dataResponse;
        LoaderService.hide();
    });
    
});

I use LoaderService in all controllers

Another approach can be see here:

Ionic Framework - The Cross-Platform App Development Leader

3 Likes
7

@Norwill great. thanks for sharing!

8

You can change css. To change background color and textcolor:

.loading-container .loading {
    background-color: white;
    color: black;

    width: 50% !important;
    border-width: 2px !important;
    border-color: black !important;
    border-style: solid !important;

}

2 Likes
9

@Norwill, This worked partily for me, the content was not changable.
What i did was , in the service, i replaced

content: '<i class="icon ion-loading-c"></i>'

to

template: '<i class="icon ion-loading-c"></i>'

then it worked, hope this will help some one.

FireBrand

1 Like
10

You can add your custom css classes to the template. I’ve put also a spinning image in some of my loading containers.

11

I am curious if anyone has actually had a custom controller like a cancel button that would cancel a promise.

Is this possible with ionic loader? I am trying to grasp the logic around this of passing the promise to it.

I am new to angular.

Any thoughts anyone?

12

Hello @mbeizer,

You can define a angular.constant inside your app.js file, where you would put your $rootScope. Like so:

    angular.constant('$ionicLoadingConfig', {
        template: '<ion-spinner icon="android"></ion-spinner>'
    })

Then, whenever you call $ionicLoading.show(), it will have the configurations you set there :slight_smile:

3 Likes
13

Hello @brunodb3,

Is it possible to add a default class to $ionicLoading?

I have try this, but not working.

angular.constant('$ionicLoadingConfig', {
template: 'some text'
,cssClass: 'blackcolor'
});
14

I refer to this documentation but unable to make the dark color default backdrop disappear. My purpose is that the dark background change to same color with background or no color.
http://ionicframework.com/docs/v1/api/service/%24ionicLoading/

$ionicLoading.show({noBackdrop: true, duration: 1800,
  template: '<ion-spinner icon="lines" class="spinner-energized"></ion-spinner> <br/> My Label'
});