ionic loading action


$ionicLoading is a default loading interaction effect of ionic. The content inside can also be modified in the template.

Usage

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

Method

Display a loading effect. 

show(opts)
##opts
ParametersTypeDetails
objectOptions for the loading indicator. Available attributes:

  • {string=} template The html content of the indicator.

  • {string=} templateUrl A url that loads the html template as the content of the indicator.

  • {boolean=} noBackdrop Whether to hide the background. It will be displayed by default.

  • {number=} delay How many milliseconds the indicator is delayed. The default is no delay.

  • {number=} duration How many milliseconds to wait before automatically hiding the indicator. By default, the indicator remains displayed until .hide() is triggered.

Hide a loading effect. 

hide()

API

##Properties##delegate-handle(optional)$ionicListDelegateshow-delete(optional)show-reorder(optional)can-swipe(optional)Example
TypeDetails
String		The handle Define a list with .

Boolean value		Whether the delete button of the list item is currently displayed or hidden.

Boolean value		Whether the sort button of the list item is currently displayed or hidden.

Boolean value		Whether list items are allowed to slide to display option buttons. Default: true.

HTML code:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

     <link href="http://www.php.cn/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.php.cn/static/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
      <ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">The Stooges</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
          </ion-list>
        </ion-content>
      </ion-view>
    
  </body>
</html>

JavaScript code

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

  // Setup the loader
  $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
  });
  
  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
  $timeout(function () {
    $ionicLoading.hide();
    $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
  }, 2000);
  
});


$ionicLoadingConfig

Set the default options for loading:

Usage:

var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
  template: '默认加载模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置
  };
});

←
→