Question

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

我也没有任何错误，并且负载不断显示！

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

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

1 个答案: