離子負載指示器

Question

這里有一個示例代碼筆來解釋我的需求。

基本上我正在運行一個 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'])

它使用攔截器進行長時間的 http 調用。 您可以在示例頁面的阻止 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;
        }
    }
})

在此處查看修改后的示例。

在我的一個應用程序中，我使用了另一個名為angular-loading-bar 的角度模塊。 我想它是最近最受歡迎的。 這也適用於攔截器，但它不會阻止 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()
  })
})

Answer 2

回答我自己的問題： $ionicLoading是我一直在尋找的。