angularjs - Angular/ ionic : How to show my spinner while components are loading

Question

我使用 ng-repeat显示很多项目，我想显示 ion-spinner如果有任何项目正在加载。

这是我的 Ionic模板:

<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>是一个自定义组件，它在调用 on-render 时从服务器检索数据已加载

我该怎么做？谢谢

Answer 1

您可以在进行 API 调用之前创建工厂并像 MultiLoading.show() 和在提供响应之后创建 MultiLoading.hide() 一样显示。

工厂

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;
});

问候。