在设置的延迟时间后加载视图

Question

我想创建一个效果，让用户在每个页面之间等待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>

Answer 1

不确定是否有自己的ng-hidden类，否则应该使用ng-hide。

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

除非您有需要很长时间才能加载的状态（例如，如果您使用resolve），否则事件$stateChangeStart和$stateChangeSuccess之间根本不会有太多延迟。这意味着传递给$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);
  });

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

演示：http://plnkr.co/edit/bpMvgFEArfiJQ5EgIrfG?p=preview