模态加载旋转器没有第二次显示

Question

我目前正在做一个angular项目。我试图在每次页面更改时显示加载旋转器。为了实现这一点，我们使用ngRoute模块并监听routeChangeStart、 routechangessuccess 、routeChangeError事件。

代码如下:

$scope.$on('$routeChangeStart', function (event, param) {
    var html = "<div class='panel-body'>"
                + "<div class='col-md-4 col-md-offset-4' style='top: 50%;'>"
                  + "<i class='fa fa-spinner fa-spin'></i> Caricamento in corso..."
               + "</div>"
            + "</div>";
    that.myModal = $modal.open({
    template: html,
    backdrop: 'static'
    });
});
$scope.$on('$routeChangeSuccess', function (event, param) {
    that.myModal.dismiss('nessuna');
});
$scope.$on('$routeChangeError', function (event, param) {
    that.myModal.dismiss('nessuna');
});

此操作有效，但仅在第一次更改某个页面时有效。我试着更好地解释:当我们在页面X并导航到页面Y时，模态显示，然后在页面更改后隐藏。如果然后我回到页X和导航到页Y模态旋转器现在显示。

调试时，我可以看到modal.open()正在执行，但它从未显示。看起来angular在某种程度上延迟了这个命令。

有人知道为什么会这样吗?以前有人遇到过这个问题吗?

Answer 1

关于显示捕获$http请求的旋转器解决方案，这里有一些信息可以开始:

http://lemoncode.net/2013/07/31/angularjs-found-great-solution-to-display-ajax-spinner-loading-widget/

在angular $http请求期间显示旋转器GIF

这个想法是拦截一个$http请求并显示微调器，然后在结束请求或承诺响应(错误和成功)时检查是否有待处理的请求，如果没有隐藏微调器

如果你需要更多的信息，给我一个嗡嗡声，我已经进一步开发了这个，并采取了一些解决方案的问题，如我不想显示一些特定的请求的旋转器

Answer 2

无论你保持捕获路由更改事件的解决方案，我不明白为什么你的模式不触发。

这是一个在plunker的演示(我使用ui-bootstrap来处理模态)。

您也可以使用这个名为Pace的脚本来根据http请求自动启动加载器。

摘自他们的文档:

Pace将自动监视您的ajax请求、事件循环滞后、文档就绪状态和页面上的元素，以决定进度。在ajax导航中，它将重新开始!