Переход Angularjs State

Question

Я создаю гибридное мобильное приложение с использованием ионного каркаса и кордовы (первый раз). У меня проблемы с переходом состояния, потому что по умолчанию угловой визуализирует шаблон перед завершением перехода. Это делает приложение медленным (например, когда вы нажимаете элемент меню и ждете его появления). Это происходит только для тех, кто загружает данные из локального хранилища или службы! Мой вопрос: как я могу сделать шаблон пустым в тот момент, когда я нажимаю элемент меню, а затем показывать загрузчик до тех пор, пока шаблон не будет готов. Некоторое значение кода используется в моем диспетчере меню для перехода состояния!

//I use ng-click="navigateTo('state name')" 

$scope.navigateTo = function (stateName) { 
    $timeout(function() { 
     $mdSidenav('left').close(); 
     if ($ionicHistory.currentStateName() != stateName) { 
      $ionicHistory.nextViewOptions({ 
       disableAnimate: false, 
       disableBack: true 
      }); 
      $state.go(stateName); 
     } 
    }, ($scope.isAndroid == true ? 1000 : 0)); 
};// End navigateTo. 

Ниже приведен код контроллера для вида, который нуждается в растворе

appControllers.controller ("calendar_Ctrl", функции ($ области действия, $ rootScope, $ состояние, $ stateParams, $ ionicHistory, $ фильтр , $ д, $ таймаут, $ лаг, MaterialCalendarData, $ момент) {

$scope.isAnimated = $stateParams.isAnimated; 

$scope.selectedDate = null; 
$scope.weekStartsOn = 0; 
$scope.dayFormat = "d"; 
$scope.disableFutureDates = false; 
$scope.directionn = "horizontal"; 


$scope.setDirection = function(direction) { 
    $scope.directionn = direction; 
    $scope.dayFormat = direction === "vertical" ? "EEEE, MMMM d" : "d"; 
}; 

$scope.dayClick = function(date) { 
    $scope.msg = "You clicked " + $filter("date")(date, "MMM d, y h:mm:ss a Z"); 
}; 



$scope.setContentViaService = function() { 
    var today = new Date(); 
    MaterialCalendarData.setDayContent(today, '<span> :oD </span>') 
} 

$scope.getItems = function(){ 
    if(localStorage.getItem("eventsData")){ 
    var eventsData = localStorage.getItem("eventsData"); 
    return JSON.parse(eventsData); 

    }else{ 
    return []; 
    } 
} 



var events = $scope.getItems(); 



// You would inject any HTML you wanted for 
// that particular date here. 
var numFmt = function(num) { 
    num = num.toString(); 
    if (num.length < 2) { 
     num = "0" + num; 
    } 
    return num; 
}; 




var loadContentAsync = false; 
$log.info("setDayContent.async", loadContentAsync); 
$scope.setDayContent = function(date) { 

    var key = [date.getFullYear(), numFmt(date.getMonth()+1), numFmt(date.getDate())].join("-"); 
    var data = (events[key]||[{ type: ""}]); 

    if (loadContentAsync) { 
     var deferred = $q.defer(); 
     $timeout(function() { 
      deferred.resolve(data); 
     }); 
     return deferred.promise; 
    } 

    return data; 

}; 


$scope.isAnimated = $stateParams.isAnimated; 


}); 

Большое спасибо за ваше время и помочь !!

Answer 1

Привет Использование $ ionicLoading Service, чтобы решить эту пробл эм,

http://ionicframework.com/docs/api/service/ $ ionicLoading/