javascript - AngularJS - href 重定向到同一域导致页面在数据准备好之前显示

Question

我正在使用 Angular 1.4.1。 我做了一个指令，一张带有缩略图和链接的通用卡片。该链接是通用绝对 URL，但通常会指向应用程序内部的某个位置。

假设我在 https://stackoverflow.com/section/可能有一张带有类似 https://stackoverflow.com/section/detail 的链接的卡片

我有一个与此类似的app.js(我只是发布感兴趣的路线部分)

.state('base.section', {
          url: 'section/',
          views: {
              '@': {
                  templateUrl: 'views/section.html',
                  controller: 'SectionController'
              }
          },
          resolve: {
              'items': function (SomeService) {
                  console.log("items resolve triggered");
                  return SomeService.doThingsReturnPromise();
              }
          }
}
.state('base.section.detail', {
          url: 'detail',
          views: {
              '@': {
                  templateUrl: 'views/detail.html',
                  controller: 'DetailController'
              }
          },
          resolve: {
              'items': function (items) {
                  return items;
              },
              'stuff': function(SomeOtherService) {
                  console.log("stuff resolve triggered.");
                  return SomeOtherService.doThingsReturnPromise();
              }
          }
}
                  

所以问题是当我点击

<a ng-href="https://stackoverflow.com/section/detail">

我正确地重定向到详细信息页面，但在解析中的 promise 完全解决之前，我得到了所有显示的类似 Angular 变量( {{ SomethingLikeThis }} )。

即使解析被触发，(我可以在控制台中看到日志)似乎 Angular 也不会等到解析完成后再加载 Controller ，正如它应该表现的那样。

当然，如果我重新加载详细信息页面，我会完全加载所有值。如果我移动到另一个网站部分( https://stackoverflow.com/baloons )，情况也是如此。

当我从同一个正在运行的应用程序从“部分”移动到“详细信息”时，问题似乎发生了

希望能够提供一个很好的问题解释

更新

我解决了问题，但为了更好地理解我想指定服务功能。它们是这样的

angular.module('myApp')
.factory('SomeService', 
function ($resource, serverURL, protocol, requestFormat) {
        return $resource(serverURL + 'backendUrl/',
            {
                callback: 'JSON_CALLBACK',
                format: requestFormat
            },
            {
                doThingsReturnPromise: {
                    method: protocol,
                    isArray: true
                }
            });

});

只是为了完整性，即使在解析中使用 $q.all(promises) 也会出现问题

Answer 1

在解析中使用 .$promise 解决了问题(没有双关语)

resolve: {
    'items': function (SomeService) {
        console.log("items resolve triggered");
        return SomeService.doThingsReturnPromise().$promise;
    }

我对 $q.all 遇到了同样的问题，解决方案是相同的，只是略有不同

resolve: {
    'items': function (SomeService, SomeOtherService, $q) {
        var promises = [
            SomeService.doThingsReturnPromise().$promise,
            SomeOtherService.doThingsReturnPromise().$promise
        ];
        return $q.all(promises);
    }
}

$q.all 返回一个 promise ，因此无需指定 .$promise 即可工作，但服务请求必须