Ionic - Javascript 加载

Ionic 加载在显示时会禁用用户的所有交互，并在需要时再次启用。

使用加载

加载是在控制器内部触发的。首先，我们需要将$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>

当用户点击按钮时，加载就会出现。通常，您希望在一些耗时的功能完成后隐藏加载。

在使用加载时，还可以使用一些其他的选项参数。下表显示了说明。

加载选项参数

选项	类型	详情
templateUrl	字符串	用于加载 HTML 模板作为加载指示器。
scope	对象	用于将自定义作用域传递给加载。默认值为$rootScope。
noBackdrop	布尔值	用于隐藏背景层。
hideOnStateChange	布尔值	用于在状态更改时隐藏加载。
delay	数字	用于延迟以毫秒为单位显示指示器。
duration	数字	用于在一段时间后以毫秒为单位隐藏指示器。可以替代hide()方法。

加载配置

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

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

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

以上代码将生成以下屏幕：

打印页面