角度 ui-router 卡在状态之间答案

【问题标题】：angular ui-router stuck in between states角度 ui-router 卡在状态之间
【发布时间】：2016-04-29 15:03:48
【问题描述】：

我在一个项目中使用 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);
    }

【问题讨论】：

出于兴趣，为什么要显示加载动画，您是在发出某种 ajax 请求吗？
是的。我在状态的解析器函数中获取后端资源，然后进入状态。但我不确定承诺是否会在一秒钟或一分钟后得到解决。为了让用户感觉发生了什么事情，我在内容区域上方而不是导航上方显示了一个加载器。

标签： javascript angularjs angular-ui-router

【解决方案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);
}

【讨论】：

嘿尼尔斯感谢您的快速回复。我目前正在度假，但我会告诉你它是否有效。太好了。
很抱歉，我花了很长时间才检查您的答案是否有效并给予答复。因此，如果存在计时器，我添加了您的行以取消超时，但是当状态更改过快时，微调器仍会继续旋转。

【解决方案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中管理出来，因为当你让出一个状态时，你会失去对状态控制器的控制，那么你就不能让spinner消失了。为此，将微调器放在 uiView 元素之外，如上例所示。

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

对于我之前糟糕的回答，我深表歉意。

【讨论】：