Question

我目前正在开展角度项目。我每次页面更改时都会尝试显示加载微调器。为此，我们使用 ngRoute 模块并收听 routeChangeStart ， routeChangeSuccess ， 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（）正在执行，但它从未显示过。它看起来像是以某种方式延迟命令。

有谁知道为什么会这样？有没有人遇到过这个问题？

Answer 1

无论你采取什么解决方案来捕捉路线变化事件，我都不明白为什么你的模态不会触发。

Here是一个关于plunker的演示（我使用ui-bootstrap来处理模态）。

您可以使用名为 Pace 的this漂亮脚本，根据http请求自动启动加载程序。

取自他们的文档：

Pace将自动监控您的ajax请求，事件循环延迟，文档就绪状态以及页面上的元素以确定进度。在ajax导航上，它将重新开始！

Answer 2

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

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

Showing Spinner GIF during $http request in angular

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

如果您需要更多信息，请给我一个嗡嗡声，我已经进一步开发了这个并采取了一些解决方案，例如我不想向某些特定请求显示微调器。

模态加载微调器不再显示

2 个答案: