Ionic - Javascript Loading
Ionic loading 在显示时会禁用与用户的任何交互，并在需要时重新启用。
使用 Loading
Loading 在 controller 中触发。首先，我们需要在 controller 中注入 $ionicLoading 作为依赖。随后，我们需要调用 $ionicLoading.show() 方法，loading 就会出现。要禁用它，可以使用 $ionicLoading.hide() 方法。
Controller
.controller('myCtrl', function($scope, $ionicLoading) {
$scope.showLoading = function() {
$ionicLoading.show({
template: 'Loading...'
});
};
$scope.hideLoading = function(){
$ionicLoading.hide();
};
});
HTML Code
<button class = "button button-block" ng-click = "showLoading()"></button>
当用户点击按钮时，loading 就会出现。通常在一些耗时功能完成后，你会想要隐藏 loading。
在使用 loading 时，还可以使用一些其他选项参数。说明如下表所示。
Loading 选项参数
| Options | Type | Details |
|---|---|---|
| templateUrl | string | 用于加载 HTML template 作为 loading 指示器。 |
| scope | object | 用于向 loading 传递自定义 scope。默认为 $rootScope。 |
| noBackdrop | Boolean | 用于隐藏 backdrop。 |
| hideOnStateChange | Boolean | 用于在 state 更改时隐藏 loading。 |
| delay | number | 用于延迟显示指示器，单位为毫秒。 |
| duration | number | 用于在指定时间后隐藏指示器，单位为毫秒。可替代 hide() 方法使用。 |
Loading Config
Ionic config 用于配置整个应用中所有 $ionicLoading 服务所使用的选项。
这可以通过 $ionicLoadingConfig 实现。由于常量应添加到主 app module 中，因此打开你的 app.js 文件，并在 module 声明后添加常量。
.constant('$ionicLoadingConfig', {
template: 'Default Loading Template...'
})
上述代码将生成以下屏幕 −
