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 템플릿을 로딩 표시기로로드하는 데 사용됩니다.
범위	목적	사용자 지정 범위를로드에 전달하는 데 사용됩니다. 기본값은 $ rootScope입니다.
아니요	부울	배경을 숨기는 데 사용됩니다.
hideOnStateChange	부울	상태가 변경 될 때 로딩을 숨기는 데 사용됩니다.
지연	번호	표시기 표시를 밀리 초 단위로 지연하는 데 사용됩니다.
지속	번호	밀리 초 단위로 잠시 후 표시기를 숨기는 데 사용됩니다. 대신 사용할 수 있습니다.hide() 방법.

구성로드

Ionic 구성은 모든 환경에서 사용할 옵션을 구성하는 데 사용됩니다. $ionicLoading 앱 전반에 걸친 서비스.

이것은 다음을 사용하여 수행 할 수 있습니다. $ionicLoadingConfig. 메인 앱 모듈에 상수를 추가해야하므로app.js 파일을 열고 모듈 선언 뒤에 상수를 추가하십시오.

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

위의 코드는 다음 화면을 생성합니다.