Angular/Ionic：如何在加载组件时显示我的微调器

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

在控制器中使用它

$ionicLoading.show({content: 'Loading', animation: 'fade-in',showBackdrop: true, maxWidth: 200,showDelay: 0});

Answer 2

您可以在进行 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;
});

此致。

Angular/Ionic：如何在加载组件时显示我的微调器

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

spinner

angularjs

ionic-framework