Is there any way to delay ng-view?

Question

I have a layout where I have:

<li ng-click="GetLoader();"><a href="../Account/#/PersonalInfo">ACCOUNT</a></li>
<li ng-click="GetLoader();"><a href="#">SETTINGS</a></li>

On the index page, I have a menu and ng-view, where I can change pages with one click. Also on the index page, a counter is enabled.

<div class="loading" ng-show="ticketloading" ng-init="GetLoader()">
    <div>
        <img class="spinner" ng-src="~/Images/ajax-loader.gif" />
    </div>
</div>

In my script, I have -

$scope.GetLoader = function() {
    $scope.ticketloading = true;
    loader.css("z-index", "1");
}

My problem is that when a user clicks on "Account", it loads, but only a few milliseconds. Then it changes to all spaces. I get data from ng-view. My question is , how can I postpone the ng-view to show the bootloader a little longer. Thanx in advance!

Answer 1

, DOM . ngClass .

, static setTimeout , $routeChangeSuccess:

$rootScope.$on('$routeChangeSuccess', function() {
    $rootScope.ticketloading = false;
});

, .

, , .

Answer 2

, dataLoading ng-if ng-view :

<div ng-view ng-if="!dataLoading">

function loadData()
{
     var self = this;
     self.dataLoading = true;
     dataService.loadData(params, function(){
           ...
           self.dataLoading = false;
     });
}