Latest web development tutorials

이온 성 부하 운전

$ IonicLoading은 이온 부하에게 기본 상호 작용 효과입니다. 또한 내부의 템플릿 내부의 내용을 수정할 수 있습니다.

용법 

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

방법

로딩 효과를 표시합니다. 

show(opts)
매개 변수 유형 세부 정보
OPTS object

로딩 표시 옵션을 선택합니다. 사용 가능한 속성 :

  • {string=} template 표시 HTML 콘텐츠.
  • {string=} templateUrl 콘텐츠 지표로로드 URL의 HTML 템플릿입니다.
  • {boolean=} noBackdrop 숨겨진 배경입니다. 기본적으로는 표시됩니다.
  • {number=} delay 을 밀리 초 단위가 지연 어떻게 표시가 표시됩니다. 기본값은 지연되지 않습니다.
  • {number=} duration 대기하는 시간을 밀리 초 단위로 자동 숨기기 표시 후. 기본적으로 표시가 트리거 될 때까지 계속 표시 .hide() .

로딩 효과를 숨 깁니다. 

hide()

API

재산 유형 세부 정보
대표 핸들
(선택 사항)
字符串

핸들은 정의되어 $ionicListDelegate 목록입니다.

쇼 - 삭제
(선택 사항)
布尔值

현재 표시 또는 숨겨진 항목의 버튼 목록을 삭제합니다.

쇼 - 재주문
(선택 사항)
布尔值

정렬 버튼 목록 항목은 현재 표시 또는 숨김.

수 - 와이프
(선택 사항)
布尔值

여부 목록 항목이 표시 옵션 버튼을 슬라이드 허용됩니다. 기본값 : 사실.

예

HTML 코드 : 

<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.w3big.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.w3big.com/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>

자바 스크립트 코드 

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

부하에 기본 옵션을 설정합니다 :

사용법 : 

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