Question

这里有一个示例codepen来解释我的需求。

基本上我正在运行一个2页的Ionic应用程序。

第1页只是第2页的超链接。

第2页从外部源读取数据，需要一些时间（2秒）。

我希望显示加载指示符，而第2页是＆＃34; loading＆＃34;这会禁止该页面上的每个用户操作。是否有任何好的模式来实现这一目标？我可以使用范围变量，例如showPage和 angularJs ng-show或类似的东西，但我会避免在每个页面中复制此模式。

有什么想法吗？

Answer 1

您可以使用angular-block-ui。

在您的项目中实施非常简单。一旦你引用了css：

<link rel="stylesheet" href="path-to-block-ui/angular-block-ui.min.css"/>

和javascript：

<script src="path-to-block-ui/angular-block-ui.min.js"></script>

您可以将依赖项添加到模块中：

angular.module('myApp', ['blockUI'])

它使用interceptors进行长时间的http调用。您可以在examples页面的阻止HTTP请求中查看其工作原理。

在你的情况下，情况略有不同，因为那里没有http请求（我知道，它是一个演示）所以你必须手动强制ui块。您可以将注入依赖性的服务更改为blockUI：

.factory('MyService', function($q, blockUI) { ... })

并在长时间运行的过程之前调用blockUI.start();，并在解析承诺时调用blockUI.stop();。

.factory('MyService', function($q, blockUI) {
    var items = ['1', '2', '3', '4', '5'];
    return {
        all: function() {
            var deferred = $q.defer();
            blockUI.start();
            setTimeout(function() {
                deferred.resolve(items);
                blockUI.stop();
            }, 2000);
            return deferred.promise;
        }
    }
})

查看修改后的示例here。

在我的某个应用中，我使用了另一个名为angular-loading-bar的角度模块。我想这是最受欢迎的。这个也适用于拦截器，但它不会阻止UI。

第三种选择是使用离子$ionicLoading服务。

你必须在这里做一些额外的工作，因为这项服务只显示一个加载指示器并阻止界面。

您可以创建一个拦截器：

var app = angular.module('ionicApp', ['ionic'])

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($rootScope) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show')
        return config
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide')
        return response
      }
    }
  })
})

侦听http请求并广播事件loading:show 当服务器响应某些数据时，拦截器会广播loading:hide。

当应用运行时，您的应用会拦截这些事件：

app.run(function($rootScope, $ionicLoading) {
  $rootScope.$on('loading:show', function() {
    $ionicLoading.show({template: 'foo'})
  })

  $rootScope.$on('loading:hide', function() {
    $ionicLoading.hide()
  })
})

Answer 2

回答我自己的问题：$ionicLoading正是我所寻找的。

离子加载指示器

2 个答案: