javascript - ionic 负载指示器

Question

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

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

第 1 页只不过是指向第 2 页的超链接。

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

我想在第 2 页“正在加载”时显示一个加载指示器，以阻止该页面上的每个用户操作。有什么好的模式可以实现这个目标吗？我可能可以使用范围变量，例如 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 block 。 您可以将注入(inject)依赖的服务更改为blockUI:

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

并在长时间运行的进程之前调用 blockUI.start(); ，并在 promise 解决时调用 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 的 Angular 模块。 。我想这是最近最流行的。这也适用于拦截器，但它不会阻止 UI。

第三个选项是使用 ionic $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()
  })
})