Angularjs状态转换

我正在使用ionic framework和cordova（第一次）构建一个混合移动应用程序。我在状态转换方面遇到问题，因为默认情况下，angular会在完成转换之前渲染模板。这会使应用程序看起来很慢（当您单击菜单项并等待它出现时）。这仅适用于从本地存储或服务加载数据的用户！我的问题是：如何在单击菜单项时使模板变空，然后显示加载程序，直到模板准备就绪。下面是我的菜单控制器中用于状态转换的一些代码

//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.

下面是需要解决方案的视图的控制器代码

控制器（“日历控制”，函数（$scope、$rootScope、$state、$stateparms、$IonichStory、$filter、$q、$timeout、$log、MaterialCalendarData、$矩）{

$scope.isAnimated=$stateParams.isAnimated；
$scope.selectedDate=null；
$scope.weekStartsOn=0；
$scope.dayFormat=“d”；
$scope.disableFutureDates=false；
$scope.directionn=“水平”；
$scope.setDirection=函数（方向）{
$scope.directionn=方向；
$scope.dayFormat=方向==“垂直”？“EEEE，毫米d”：“d”；
};
$scope.dayClick=函数（日期）{
$scope.msg=“您单击了”+$filter（“日期”）（日期，“MMM d，y h:mm:ss a Z”）；
};
$scope.setContentViaService=函数（）{
var today=新日期（）；
MaterialCalendarData.setDayContent（今天“：oD”）
}
$scope.getItems=函数（）{
if（localStorage.getItem（“eventsData”））{
var eventsData=localStorage.getItem（“eventsData”）；
返回JSON.parse（eventsData）；
}否则{
返回[]；
}
}
var events=$scope.getItems（）；
//您可以为其注入任何想要的HTML
//这个日期在这里。
var numFmt=函数（num）{
num=num.toString（）；
如果（数量长度<2）{
num=“0”+num；
}
返回num；
};
var loadContentAsync=false；
$log.info（“setDayContent.async”，loadContentAsync）；
$scope.setDayContent=函数（日期）{
var key=[date.getFullYear（），numFmt（date.getMonth（）+1），numFmt（date.getDate（））].join（“-”；
变量数据=（事件[键]| |[{type:：}]）；
if（loadContentAsync）{
var deferred=$q.deferred（）；
$timeout（函数（）{
延迟。解析（数据）；
});
回报。承诺；
}
返回数据；
};
$scope.isAnimated=$stateParams.isAnimated；
});

---

非常感谢您的时间和帮助

Hi使用$ionicLoading服务解决此问题

---

$ionicLoading/

非常感谢您的回答，我已经解决了两天，但我会研究一下这个解决方案，看看它是否更快：）

$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;


});