Ionic - Đang tải Javascript

Tải ion sẽ vô hiệu hóa bất kỳ tương tác nào với người dùng khi được hiển thị và bật lại khi cần.

Sử dụng tải

Tải được kích hoạt bên trong bộ điều khiển. Đầu tiên, chúng ta cần tiêm$ionicLoadingtrong bộ điều khiển của chúng tôi dưới dạng phụ thuộc. Sau đó, chúng ta cần gọi$ionicLoading.show()phương thức và tải sẽ xuất hiện. Để vô hiệu hóa nó, có một$ionicLoading.hide() phương pháp.

Bộ điều khiển

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

Mã HTML

<button class = "button button-block" ng-click = "showLoading()"></button>

Khi người dùng nhấn vào nút, quá trình tải sẽ xuất hiện. Thông thường, bạn sẽ muốn ẩn việc tải sau khi hoàn thành một số chức năng tốn thời gian.

Một số tham số tùy chọn khác có thể được sử dụng khi làm việc với tải. Giải thích được hiển thị trong bảng dưới đây.

Đang tải thông số tùy chọn

Tùy chọn	Kiểu	Chi tiết
templateUrl	chuỗi	Được sử dụng để tải mẫu HTML làm chỉ báo tải.
phạm vi	vật	Được sử dụng để chuyển phạm vi tùy chỉnh để tải. Mặc định là $ rootScope.
noBackdrop	Boolean	Dùng để ẩn phông nền.
hideOnStateChange	Boolean	Được sử dụng để ẩn tải khi trạng thái được thay đổi.
sự chậm trễ	con số	Được sử dụng để trì hoãn việc hiển thị chỉ báo tính bằng mili giây.
thời hạn	con số	Được sử dụng để ẩn chỉ báo sau một khoảng thời gian tính bằng mili giây. Có thể dùng thay thếhide() phương pháp.

Đang tải cấu hình

Cấu hình Ionic được sử dụng để định cấu hình các tùy chọn bạn muốn được sử dụng trong tất cả $ionicLoading các dịch vụ trên toàn ứng dụng.

Điều này có thể được thực hiện bằng cách sử dụng $ionicLoadingConfig. Vì các hằng số sẽ được thêm vào mô-đun ứng dụng chính, hãy mởapp.js và thêm hằng số của bạn sau khi khai báo mô-đun.

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

Đoạn mã trên sẽ tạo ra màn hình sau: