이온 로딩 작용


$ionicLoading은 ionic의 기본 로딩 상호작용 효과입니다. 내부 콘텐츠도 템플릿에서 수정할 수 있습니다.

Usage

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

Method

로딩 효과를 보여줍니다. 

show(opts)
parameterstypedetails
optsobjectobject

loading指示器的选项。可用属性：

  • {string=} template 指示器的html内容。

  • {string=} templateUrl 一个加载html模板的url作为指示器的内容。

  • {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。

  • {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。

  • {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。

隐藏一个加载效果。

hide()

API

  • {string=}templateUrl html 템플릿을 표시기의 콘텐츠로 로드하는 URL입니다.
  • 属性类型详情
    delegate-handle
    (可选)
    		字符串

    该句柄定义带有$ionicListDelegate的列表。

    show-delete
    (可选)
    		布尔值

    列表项的删除按钮当前是显示还是隐藏。

    show-reorder
    (可选)
    		布尔值

    列表项的排序按钮当前是显示还是隐藏。

    can-swipe
    (可选)
    		布尔值로드 표시기 옵션. 사용 가능한 속성:

    • {string=} template 표시기의 html 콘텐츠입니다.
    {boolean=} noBackdrop 배경을 숨길지 여부입니다. 기본적으로 표시됩니다.

  • {number=} delay 표시기가 표시되기까지 몇 밀리초가 지연됩니다. 기본값은 지연 없음입니다.

  • {number=} duration 표시기를 자동으로 숨기기 전에 기다려야 하는 시간(밀리초)입니다. 기본적으로 표시기는 .hide()가 트리거될 때까지 표시됩니다.


    • 로딩 효과를 숨깁니다. 
    <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>

    API

    Property
    🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜delegate-handle
    (선택 사항)🎜🎜🎜String🎜 🎜🎜이 핸들은 $ionicListDelegate로 목록을 정의합니다. 🎜🎜🎜🎜🎜show-delete
    (선택 사항)🎜🎜🎜부울 값🎜🎜🎜목록 항목의 삭제 버튼이 현재 표시되는지 또는 숨겨지는지 여부입니다. 🎜🎜🎜🎜🎜show-reorder
    (선택 사항)🎜🎜🎜부울 값🎜🎜🎜목록 항목의 정렬 버튼이 현재 표시되는지 또는 숨겨지는지 여부입니다. 🎜🎜🎜🎜🎜can-swipe
    (선택 사항)🎜🎜🎜부울 값🎜🎜🎜목록 항목을 슬라이드하여 옵션 버튼을 표시할 수 있는지 여부. 기본값: 참. 🎜🎜🎜🎜🎜🎜🎜예🎜🎜HTML 코드:🎜
    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);
  
});
    🎜JavaScript 코드🎜
    var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
  template: '默认加载模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置
  };
});
    🎜🎜🎜🎜$ionicLoadingConfig🎜🎜로드 기본 옵션 설정:🎜🎜사용법:🎜 🎜
    ←
    →