Ionic Javascript加载

离线加载将在显示时禁用与用户的任何交互，并在需要时再次启用它。

使用加载

在控制器内触发加载。首先，我们需要在控制器中注入 $ ionicLoading 作为依赖。之后，我们需要调用 $ ionicLoading.show（） 方法并显示加载。为了禁用它，有一个 $ ionicLoading.hide（） 方法。

调节器

.controller('myCtrl', function($scope, $ionicLoading) {

   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

HTML代码

<button class = "button button-block" ng-click = "showLoading()"></button>

当用户点击按钮时，将显示加载。通常需要在完成一些耗时的功能后隐藏加载。

Ionic装载秀

使用加载时可以使用其他一些选项参数。解释如下表所示。

加载选项参数

Options Type Details
templateUrl string 用于加载HTML模板作为加载指示器。
scope object 用于将自定义范围传递给加载。默认值是$ rootScope。
noBackdrop Boolean 用于隐藏背景。
hideOnStateChange Boolean 用于在状态更改时隐藏加载。
delay number 用于延迟显示指标，以毫秒为单位。
duration number 用于在一段时间后隐藏指示器，以毫秒为单位。可以用来代替hide（）方法。

加载配置

Ionic配置用于配置您希望在整个应用程序中的所有 $ ionicLoading 服务中使用的选项。

这可以通过使用 $ ionicLoadingConfig 来完成。由于常量应添加到主app模块，打开 app.js 文件并在模块声明后添加常量。

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

上面的代码将生成以下屏幕

Ionic加载常数