Question

我通过以角度调用init()方法从服务器加载数据。我使用$ionicLoading.show();作为加载程序，但它没有显示加载时间。我能够成功从服务器获取数据，但是没有显示加载器。

我试过angular.element(document).ready(function () { });. 但是仍然不能看到装载机。我需要一些关于页面加载的数据。

示例代码：

angular.module('App.controllers').controller('WorkoutCtrl', function ($scope,$state,$ionicModal,serviceEngine,$ionicPopup,$rootScope,$ionicLoading,$location) {

    var init = function(){ 
        $ionicLoading.show({template: 'Loading...</p>'}); 
        if(deviceApi.checkConnectionStatus() === 'online'){
            console.log('We are inside online');
                 serviceEngine.getMethod()//server call
                    .success(function(data,status,headers){
                        $ionicLoading.hide(); 
                    })
                    .error(function(){
                        $ionicLoading.hide(); 
                    }) 
        }else{
            $ionicLoading.hide();
            $ionicPopup.alert({title: 'ERROR',template: 'Application is offline. Check your network connection.'});   
        } 

    }

    init();

Answer 1

在init函数之外编写ionicLoading.show。

示例：

angular.module('App.controllers').controller('WorkoutCtrl', function ($scope,$state,$ionicModal,serviceEngine,$ionicPopup,$rootScope,$ionicLoading,$location) { $ionicLoading.show({ template: '<div class="icon ion-loading-a"></div> Loading... ', animation: 'fade-in', showBackdrop: true, maxWidth: 500, showDelay: 100 }); var init = function(){ if(deviceApi.checkConnectionStatus() === 'online'){ console.log('We are inside online'); serviceEngine.getMethod()//server call .success(function(data,status,headers){ $ionicLoading.hide(); }) .error(function(){ $ionicLoading.hide(); }) }else{ $ionicLoading.hide(); $ionicPopup.alert({title: 'ERROR',template: 'Application is offline. Check your network connection.'}); } } init();

Answer 2

试试以下，这应该适合你：

angular.module('App.controllers').controller('WorkoutCtrl', WorkoutCtrl);
 WorkoutCtrl.$inject = ['$scope', '$state', '$ionicModal', 'serviceEngine', '$ionicPopup', '$rootScope', '$ionicLoading', '$location'];

 function WorkoutCtrl ($scope, $state, $ionicModal, serviceEngine, $ionicPopup, $rootScope, $ionicLoading, $location) {
    var init = function () {
        $ionicLoading.show({
        content: 'Loading...',
        animation: 'fade-out',
        showBackdrop: false,
        maxWidth: 200,
        showDelay: 500,
      });
      if(deviceApi.checkConnectionStatus() === 'online'){
            console.log('We are inside online');
                 serviceEngine.getMethod()
                 .then(function (data,status,headers) { // DO SOMETHING WITH DATA

                  })
                  .catch(function () { // Error Handling

                  })
                  .finally(function () { // Finally close the Loader
                    $ionicLoading.hide();
                  });
        }else{
            $ionicLoading.hide();
            $ionicPopup.alert({title: 'ERROR',template: 'Application is offline. Check your network connection.'});   
      }
    }


    init();
}

我已经移动代码来最终隐藏加载器，但是，你可以在那时或者捕捉它。我更喜欢以这种方式组织我的服务电话，然后：使用服务电话中的数据执行某些操作， Catch ：处理错误，最后：执行操作清理工作。

$ ionicLoading未在控制器加载第一个方法上显示

2 个答案: