Question

我在项目中使用UI-Router。我正在使用路由器提供的状态解析功能。当我想在两个状态之间显示一个加载器并且我经常更改状态时，微调器弹出但不再消失。
在这里可以找到相同的效果。
http://rp.js.org/angular-ui-view-spinner/example/index.html
如果在两个状态之间快速点击，则加载程序不会隐藏。
我正在等待stateChangeStart广播并显示加载器和statChangeSuccess，stateChangeError和viewContentLoaded我想要隐藏加载器。 stateChangeStart被触发但stateChangeSuccess不会被触发。知道为什么会出现这种行为吗？
我在版本0.2.18中使用angular-ui-router

这里显示和隐藏代码：

    $rootScope.$on('$stateChangeStart', showLoading);
    $rootScope.$on('$stateChangeSuccess', hideLoading);
    $rootScope.$on('$stateChangeError', hideLoading);
    $rootScope.$on('$viewContentLoaded', hideLoading);

    function showLoading() {
        $timeout(function () {
            angular.element('.loading-indicator').show();
        }, 50);
    }


    function hideLoading() {
        $timeout(function () {
            angular.element('.loading-indicator').hide();
        }, 50);
    }

Answer 1

您需要取消之前的计时器。请参阅此处的文档：https://docs.angularjs.org/api/ng/service/ $ timeout。

var yourTimer;
function showLoading() {
    if (yourTimer) {$timeout.cancel(yourTimer);}
    yourTimer = $timeout(function () {
        angular.element('.loading-indicator').show();
    }, 50);
}


function hideLoading() {
    if (yourTimer) {$timeout.cancel(yourTimer);}
    yourTimer = $timeout(function () {
        angular.element('.loading-indicator').hide();
    }, 50);
}

Answer 2

我无法理解您使用计时器加载微调器的原因，如果您使用动画，我建议仅使用css。

这里有一些我的代码： HTML

<div ui-view class="fade container-fluid"></div>
<div class="spinner modal-viewer" hidden>
    <div class="transparente"></div>
    <div class="contenedor">
        <div class="center-middle">
            <div class="sk-circle">
                <div class="sk-circle1 sk-child"></div>
                <div class="sk-circle2 sk-child"></div>
                ...
                <div class="sk-circle11 sk-child"></div>
                <div class="sk-circle12 sk-child"></div>
            </div>
        </div>
    </div>
</div>

你需要从uiView中管理它们，因为当你退出状态时，你将失去对状态控制器的控制，然后你就不能消除微调器。为此，将微调器放在uiView元素之外，如上例所示。

JS

document.querySelector('.spinner')['style'].display = 'none';

我为之前的糟糕答案道歉。

角度ui-router卡在状态之间

2 个答案: