Question

我正在使用离子框架和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 /

Angularjs州过渡

1 个答案: