Angular-UI Router - Resolve not waiting promise to resolve 由于状态切换

Angular-UI Router - Resolve not waiting for promise to resolve due state switching

我知道已经有一个类似的问题Angular-UI Router - Resolve not waiting for promise to resolve?但与我的问题不完全相同。

我有两种状态:

.state('entities', {
    url: '/',
    ...
    resolve: {
       data: function (xyzService) {
          return xyzService.listEntities();
       }
 })

 .state('entities1', {
    url: '/entities1',
    ...
    resolve: {
       data: function (xyzService) {
          return xyzService.listEntities();
       }
 })

这两个状态都需要或依赖于相同的实体集合,我 return 来自 xyzServce.listEntities()。这个服务方法从它的角度来说 return 是一个来自实体的数组并且 return 是一个承诺。

所以我希望在使用它之前在控制器中有这个 'data'。 当调用状态时第一次使用控制器的 'data' 时,一切都完美无缺。问题来了,当我先打电话给例如 状态 'entities' 在状态 'entities1' 之后,最后状态 'entities'。 所以在状态 'entities' 的这一步 resolve 不会等待解决所有依赖关系,并且在这个状态的控制器中我有 'data' 没有数组元素并且 $resolved 属性 为 false 和一个空$承诺对象。

那么你能告诉我为什么会出现这种行为吗?我是否应该期望每次调用状态时都解决了依赖关系,或者这仅在第一次调用页面时按规范工作?

你能给我一些解决这个问题的想法吗?

此致,

请求的服务示例:

    angular
        .module(SECURITY_MODULE)
        .factory('roleService', roleService);

    roleService.$inject = ['$resource', 'DOMAINS', 'notificationService', '$filter'];

    function roleService($resource, DOMAINS, notificationService, $filter) {
        var service = {
            ...
            listRoles: listRoles
            ...
        };

        var roleResource = $resource(DOMAINS.api + 'roles/:id/:command/:command2', {id : '@id'}, {
            ....
            'listRoles': {method: 'GET', isArray: true}
        });

        function listRoles(callbackSuccess, errorCallback) {
            var roles = roleResource.listRoles(function() {
                callbackSuccess && callbackSuccess(roles);
            }, function(error) {
                errorCallback && errorCallback(error);
            });

            return roles;
        }
....
    return service;
}

如果你使用 angular $resource 你应该 return xyzService.listEntities().$promise

https://docs.angularjs.org/api/ngResource/service/$resource

如文档中所列,资源立即 returns 一个值(空对象或空数组),然后获取数据并稍后分配它。

https://docs.angularjs.org/api/ngResource/service/$resource

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view.

直接在控制器内部使用时效果很好,但不适用于路由器的解析,因为对于路由器库,该值已经用初始值解析。

正如@Dmitriy 指出的那样,您应该使用通过 $promise 字段提供的资源承诺。在值存在或发生错误之前,这不会解决。

有关更多详细信息,请参阅关于该主题的精彩 post:http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/