Devid Farinelli Devid Farinelli - 3 months ago 52
AngularJS Question

Angular/Ionic: How to show my spinner while components are loading

I use

ng-repeat
to display many items and I want to show the
ion-spinner
if there is any item that is loading.

This is my
Ionic
template:

<div>
<ion-spinner icon="ripple"></ion-spinner>
</div>
<ion-list>
<ion-item
ng-repeat="item in items"
ng-show="rendered">
<mycomp on-render="rendered = $(completed)"></myomp>
</ion-item>
</ion-list>


<mycomp>
is a custom component that retrieves data from a server that when calls
on-render
is loaded

How can I do this? Thanks

Answer

You can create factory and show like MultiLoading.show() before making API call and MultiLoading.hide() after the response is served.

factory

app.factory('MultiLoading', function($ionicLoading) {
//Loading indicator
var loading = {
    opened: 0,
    show: function() {
        if (loading.opened > 0)
            return;
        $ionicLoading.show({
          noBackdrop :false,
          template: '<ion-spinner icon="ripple"></ion-spinner>',
          duration :20000
      });
        loading.opened+=1;
    },
    hide: function() { 
        loading.opened = 0;
        $ionicLoading.hide();
    }
};
return loading;
});

Regards.

Comments