Angularjs 设定延迟时间后的负载视图

我想创建一个效果，用户在每页之间等待2-3秒；目前我的html页面中有一个div，带有.page加载类；在我的运行脚本中，我有下面的代码

我也没有得到任何错误，加载是不断显示

app.run.js

(function() {
    'use strict';
    angular.module('app')
        .run(run);

    run.$inject = ['$window', '$rootScope', '$timeout'];

    function run($window, $rootScope, $timeout) {

        //Loading
        var delay = 1000;

        $rootScope
            .$on('$stateChangeStart',
                function(event, toState, toParams, fromState, fromParams) {
                    $timeout(function() {
                        $(".page-loading").removeClass("ng-hidden");
                        $(".page").addClass("ng-hidden");
                    }, delay);
                });

        $rootScope
            .$on('$stateChangeSuccess',
                function(event, toState, toParams, fromState, fromParams) {
                    $timeout(function() {
                        $(".page-loading").addClass("ng-hidden");
                        $(".page").removeClass("ng-hidden");
                    }, delay);
                });



    };
})();

我的视图代码

<div class="page-loading ng-hidden">Loading...</div>
<div ui-view class="page"></div>

正在加载。。。

不确定是否有自己的

ng hide

类，否则应使用

ng hide

除此之外，代码中还有一些计时问题

除非加载状态需要很长时间（例如，如果使用

resolve

），否则事件

$stateChangeStart

和

$statechangesucture

之间不会有太多延迟。这意味着传递给

$timeout

的两个函数将紧接着启动，例如，loader元素将删除一个类，然后立即再次添加

下面是一个例子，我相信你正在努力实现的目标

var hideClass = 'ng-hide',
  delay = 1000,
  firstChangeStartt = false,
  firstContentLoaded = false,
  timer;

$rootScope.$on('$stateChangeStart',
  function(event, toState, toParams, fromState, fromParams) {

    // Remove this if you want the loader + delayed view behavior when first entering the page
    if (!firstChangeStartt) {
      firstChangeStartt = true;
      return;
    }

    // Cancel the ongoing timer (if any)
    // This is used not to get weird behaviors if you change state before the previous has finished loading
    $timeout.cancel(timer);

    // Show the loader and hide the old view as soon as a state change has started
    $(".page-loading").removeClass(hideClass);
    $('.page').addClass(hideClass);
  });

// Use '$viewContentLoaded' instead of '$stateChangeSuccess'.
// When '$stateChangeSuccess' fires the DOM has not been rendered and you cannot directly query the elements from the new HTML
// When '$viewContentLoaded' fires the new DOM has been rendered
$rootScope.$on('$viewContentLoaded',
  function(event, toState, toParams, fromState, fromParams) {

    // Remove this if you want the loader + delayed view behavior when first entering the page
    if (!firstContentLoaded) {
      firstContentLoaded = true;
      return;
    }

    $timeout.cancel(timer);

    // Hide the new view as soon as it has rendered
    var page = $('.page');
    page.addClass(hideClass);

    // Hide the loader and show the new view after a delay
    // Pass false as the third argument to prevent the digest loop from starting (since you are just modifying CSS there is no reason for Angular to perform dirty checking in this example)
    timer = $timeout(function() {

      page.removeClass(hideClass);
      $(".page-loading").addClass(hideClass);

    }, delay, false);
  });

如果你有任何问题，请告诉我

演示：