AngularJS：多个承诺不规律地解决

Question

我在控制器中将两个集合分配到我的范围内；两者都来自包装 RestAngular 并返回承诺的服务。每个单独返回我想要的集合，但是当我将两者都分配给 $scope 时，它​​们中的一个永远不会解决（无论它们的顺序如何，都是同一个失败）。

如果我通过再次调用有问题的服务登录到控制台，那么你瞧，原来的分配工作完美。

这两个服务的工作方式几乎相同：

.factory('Role', ['Restangular', '$q', function(Restangular, $q){
        var _collection = [];
        var _roleService = Restangular.all('roles');

        return {
            getList: function() {
                // return _roleService.getList();
                var listDeferred = $q.defer();
                _roleService.getList()
                .then(function(list) {
                    listDeferred.resolve(list);
                    _collection = list;
                });
                return listDeferred.promise;
            }
        }
    }
])

并且控制器指定如下（我已将 console.log 保留在其中，但删除它会导致 $scope.roles 永远无法解析）：

.controller('ResourceCtrl', ['$scope', 'Resource', 'Role', function($scope, Resource, Role) {
    $scope.roles = Role.getList();
    $scope.resources = Resource.getList();

    console.log(Role.getList());
}])

一切都是在 Angular 中完成的，所以我不认为我错过了 $apply - 但除非我偶然发现了一个错误，否则我的代码肯定有问题......

编辑

我找到了导致错误的原因，但没有解决方案。我的 Resource 服务与 Role 一非常相似，但由于 Resources 具有 Roles，我将 Role 注入 Resource 并使用它将各个元素链接在一起。一旦我删除了那行，所有范围/承诺的东西都回来了。

我想这让我回到：如何可靠地将服务链接在一起（即，具有角色字段的资源可以在服务级别将相应的角色对象附加到它们）。

这是我的资源：

.factory('Resource', ['Restangular', '$q', 'Role',
    function(Restangular, $q, Role){
        var _resourceService = RestAngular.all('resources');
        var _roleService = Role;

        var _convertObjectsToUrls = function(item) {
            for (var property in item) {
                if (item.hasOwnProperty(property) && typeof(item[property]) == 'object' && item[property] != null) {
                    item[property] = item[property].url;
                }
            }
            return item;
        }

        var _convertUrlsToObjects = function(item) {
            for (var property in item) {
                if (item.hasOwnProperty(property) && typeof(item[property]) == 'string' && item[property] != '' && property != 'url' && item[property].substr(0,4) == 'http') {
 /* THIS LINE BREAKS IT */                       item[property] = _roleService.getByUrl(item[property]);
                }
            }
            return item;
        }

        var _getIdFromUrl = function(url) {
            var pathElements = url.split('/')
            return pathElements[pathElements.length - 2]
        }

        var _cleanParams = function(item) {
            for (var property in item) {
                if (item.hasOwnProperty(property)) {
                    item[property] = undefined;
                }
            }
            return item;
        }

        return {
            add: function(item) {
                var responseDeferred = $q.defer();
                item = _convertObjectsToUrls(item);

                _resourceService.post(item)
                .then(function(response){
                    response = _convertUrlsToObjects(response);
                    response.name = response.first_name + ' ' + response.last_name;

                    _collection.push(response);
                    responseDeferred.resolve(response);

                    item = _cleanParams(item);
                });
                return responseDeferred.promise;
            },
            edit: function(item) {
                var responseDeferred = $q.defer();
                var idx = _collection.indexOf(item);
                item = _convertObjectsToUrls(item);

                item.customPUT(_getIdFromUrl(item.url))
                .then(function(response){
                    response = _convertUrlsToObjects(response);
                    response.name = response.first_name + ' ' + response.last_name;

                    _collection.splice(idx, 1, response)
                    responseDeferred.resolve(response);
                });
                return responseDeferred.promise;
            },
            delete: function(item) {
                var responseDeferred = $q.defer();
                var idx = _collection.indexOf(item);
                // item = _convertObjectsToUrls(item);

                item.customDELETE(_getIdFromUrl(item.url), {})
                .then(function(response){
                    response = _convertUrlsToObjects(response);

                    _collection.splice(idx, 1)
                    responseDeferred.resolve(response);
                });
                return responseDeferred.promise;
            },
            getList: function() {
                var listDeferred = $q.defer();
                var list = _resourceService.getList()
                .then(function(list) {
                    _.each(list, function(item, index, list){
                        item = _convertUrlsToObjects(item);
                        item.name = item.first_name + ' ' + item.last_name;
                    })
                    listDeferred.resolve(list);
                    _collection = list;
                });
                return listDeferred.promise;
            }
        }
    }
])

Answer 1

不确定资源服务来自何处以及是否重要。由于您在角色服务中返回了一个承诺，您可以这样做：

.controller('ResourceCtrl', ['$scope', 'Role', function($scope, Role) {
    Role.getList().then(function(roles){
         $scope.roles = roles;
    });
}])

或者，您可以让 Angular 为您解析角色（例如，如果您只是在模板中使用角色）

.controller('ResourceCtrl', ['$scope', 'Role', function($scope, Role) {
      $scope.roles = Role.getList();
 }])

编辑：我还注意到var _collection = []; 似乎不需要。也许您还可以发布资源服务的代码？ 您的角色服务的这段代码应该足够了。

.factory('Role', ['Restangular', '$q', function(Restangular, $q){
        return {
            getList: function() {
                var listDeferred = $q.defer();
                Restangular.all('roles').getList().then(function(list) {
                    listDeferred.resolve(list);
                });
                return listDeferred.promise;
            }
        }
    }
])

进一步编辑：

这个 plunkr 表明，在 angular 1.2rc3 中，第一种方法有效： http://embed.plnkr.co/SU5UMK7jNffXWnWiV1HE/preview

但是，如果您要尝试利用 promise 的自动取消交换功能（在 rc3 中已弃用，那么您就不走运了）： http://embed.plnkr.co/zdepkLCesYkj8pXYFTN2/preview