$ ionicLoading не отображается при первом загрузке контроллера

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

записи 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

Try После, это должно работать для вас:

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: Обработать ошибку, Наконец: выполните очистку.

Answer 3

У меня была аналогичная проблема ($ ionicLoading.hide() не работает), когда я реализовал кэш localStorage в своем приложении. Я отлаживался с большим количеством console.log повсюду, потому что у меня не было ни одной ошибки на консоли. Я пришел к выводу, что получение кэшированных данных было настолько быстрым, что $ ionicLoading.hide() завершает выполнение до $ ionicLoading.show().

Что для меня было решено: $ timeout (function() {$ ionicLoading.hide()}, 100); Я видел этот хак, прежде чем на титане с Android, так что я предполагаю, что это что-то делать с тем, как Android код обрабатывается ...

EDIT

Если вы делаете $ ionicLoading.show ({задержка: 100}), а затем $ ionicLoading.hide() работает, я имею в виду, если два вызова выполняются очень быстро (менее 100 мс) загрузка никогда не отображается, что должно ожидаться. Я думаю, что вызов шоу зарегистрирован, и вызов hide отменяет его. Очевидно! Но когда вы не используете опцию delay, вызов show тратит некоторое время на выполнение (async, моя догадка), в то время как вызов hide запускается (и ничего не скрывает), в результате чего загрузка остается открытой навсегда.