Angularjs 状态转换

Question

我正在使用 ionic 框架和 cordova 构建一个混合移动应用程序（第一次）。我遇到了状态转换问题，因为默认情况下，角度会在完成转换之前渲染模板。这会使应用程序看起来很慢（当您单击一个菜单项并等待它出现）。这只发生在那些从本地存储或服务加载数据的人身上！我的问题是：如何在单击菜单项的那一刻使模板为空，然后显示加载器，直到模板准备好。以下是我的菜单控制器中用于状态转换的一些代码！

//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", function($scope,$rootScope, $state,$stateParams, $ionicHistory, $filter, $q, $timeout, $log, MaterialCalendarData, $moment) {

$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服务解决这个问题，

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