使用ui-router的resolve将数据从ngResource注入到控制器中

Question

在有角度的ui路由器文档中指出，仅在解决所有承诺（包括从远程服务器获取数据）后，控制器才会实例化。

我有一个$ resource实例：

angular.module('app')
    .factory('Item', item);

item.$inject = ['$resource'];

function item($resource) {
    return $resource('/items/:id/', {id: '@id'}, {
        update: {method: 'PATCH'}
    });
}

我定义了一个状态，该状态从url中获取ID，并从REST API中检索数据：

     $stateProvider.state('item', {
            url: '/item/:itemId',
            templateUrl: '../components/item/item.html',
            controller: 'ItemController',
            resolve: {
                item: function ($stateParams, Item) {
                    return Item.get({id: $stateParams.itemId});
                }
            }
        })

在控制器中，我尝试使用Item参数，假设如果控制器正常工作，则所有数据均已获取，我可以自由使用它：

angular.module('app')
    .controller('ItemController', ItemController);

ItemController.$inject = ['$scope', 'item', 'Item'];

function ItemController($scope, item, Item) {

        $scope.item = item;
        $scope.similarItems = Item.query({item_type__id: $scope.item.item_type_detail.id});
} 

但是浏览器给我这个错误：

TypeError：无法读取未定义的属性“ id”

并指向这条确切的线，这意味着$ scope.item.item_type_detail仍未定义，换句话说，-未解析。

但是，如果我将第二个Item调用（在控制器中）包装在$ timeout中（例如5000ms），它将正常工作，这意味着问题不在于ajax调用或不当的依赖注入，而是控制器以某种方式实例化在诺言解决之前。 该如何解释？该如何解决？

Answer 1

将承诺返回到解析器函数：

$stateProvider.state('item', {
    url: '/item/:itemId',
    templateUrl: '../components/item/item.html',
    controller: 'ItemController',
    resolve: {
        item: function ($stateParams, Item) {
            //return Item.get({id: $stateParams.itemId});
            return Item.get({id: $stateParams.itemId}).$promise;
            //return promise --------------------------^^^^^^^^^
        }
    }
})

重要的是要意识到调用$resource对象方法会立即返回空引用。 从服务器返回数据后，将使用实际数据填充现有引用。

通过返回$promise属性，路由器将等待来自服务器的数据。