AngularJS

Question

我正在使用 Angular 1.4.1。我做了一个指令，一张带有缩略图和 link 的通用卡片。 link 是一个通用的绝对值 url，但通常指向应用程序内部的某处。

所以假设我在 https://whosebug.com/section/ there could be a card with a link like https://whosebug.com/section/detail

我有一个app.js类似的（我只是post感兴趣的路线部分）

.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://whosebug.com/section/detail">

我正确地重定向到详细信息页面，但在解决方案中的承诺完全解决之前，我得到了所有 angular 类似变量显示（{{ somethingLikeThis }}）。

即使 resolve 被触发，（我可以在控制台中看到日志）似乎 Angular 也不会等到 resolve 完成后再加载控制器，因为它应该表现得很好。

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

当我从同一个运行应用程序 "section" 移动到 "detail" 时，问题似乎就出现了

希望有好的问题解释

更新

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

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

});

为了完整起见，即使在 resolve

中使用 $q.all(promises) 也会出现问题

Answer 1

在 resolve 中使用 .$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 return 一个承诺，因此无需指定 .$promise 即可工作，但服务请求必须

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

AngularJS - href redirect to same domain cause page display before data are ready

javascript

href

angularjs-directive

angularjs-controller