Javascript 在根级别显示加载指示器，直到所有路由解析完成

我已经在谷歌上搜索过了，但是我找不到一个有效的解决方案

我正在使用AngularJS 1.5.5和.NET Web API 2构建一个Web应用程序，我只想隐藏

ng视图

元素，直到路线上的所有解析都完成

我试图使用

$routeChangeStart

和

$routeChangeSuccess

在

$rootScope

上设置一个变量，该变量在索引html中用于显示加载指示器并隐藏内容，直到变量为

false

以下是routeChange属性的路由代码：

这是我使用

$loadingRoute

变量的html：

---

为了让解析器延迟路由更改，它应该返回一个承诺。否则，路由更改会立即发生，这是在解析来自

accountService.getMyAccountData（）

的承诺之前触发

$routeChangeSuccess

时发生的情况

问题是

$resource

方法（因此

accountService.getMyAccountData（）

）返回异步填充数据的自填充对象。此数据的承诺作为

$promise

属性（请参阅）提供，因此应将其用于解析程序：

$accountResolver: function (accountService) {
  return accountService.getMyAccountData().$promise;
}

如果

accountService

被认为是

accountResource

的纯粹基于承诺的包装器，那么更干净的方法是从其方法返回承诺：

getMyAccountData: function () {
    return accountResource.getMyAccountData().$promise;
}

---

如果这不起作用，那么你做错了什么。有太多相关但未发布的代码。accountService和accountController在哪里？accountController在这种情况下是不相关的，因为控制器中的任何代码都将在解析后运行。至于服务，它将返回

accountResource.getMyAccountData（）

，这是对Get方法的一个非常简单的$resource调用。简而言之，它返回一个承诺，该承诺在Web API返回响应后解析。

$routeChangeSuccess

在承诺解决之前启动，我认为这是错误的。如果您真的希望看到服务和资源中的几行代码，我可以共享它们。没有证据表明getMyAccountData确实返回了承诺。如果你所描述的事情没有回报承诺，那么它是可能的，否则它就不太可能发生。请提供所有相关的代码，并考虑添加一个可以复制这个问题的大块/小提琴。请看，我已经更新了问题以包括服务和资源，但今晚我没有时间设置plunkr/fiddle，但我会尝试明天某个时候起床。我的问题确实是我没有在服务中返回

$promise

。我想我会错过一些小东西，谢谢你的澄清！

_app.factory('accountService', [
        'accountResource',
        function (accountResource) {
            var _self = this;

            return {
                register: function (authData) {
                    return accountResource.register(authData);
                },

                getMyAccountData: function () {
                    return accountResource.getMyAccountData();
                }
            }
        }
]);

_app.factory('accountResource', [
        '$resource', 'rootUrl',
        function ($resource, rootUrl) {
            var api = rootUrl() + 'api/Account';
            return $resource(api,
            {},
            {
                register: {
                    method: 'POST',
                    url: '{0}/register'.format(api)
                },
                getMyAccountData: {
                    method: 'GET',
                    url: '{0}/GetMyAccountData'.format(api)
                }
            });
        }
    ])

$accountResolver: function (accountService) {
  return accountService.getMyAccountData().$promise;
}

getMyAccountData: function () {
    return accountResource.getMyAccountData().$promise;
}