Question

在角度ui-router文档中，声明只有在解决了所有promise之后才会实例化控制器，包括从远程服务器获取数据。

我有一个$ 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 仍未定义，换句话说 - 未解析。

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

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属性，路由器将等待来自服务器的数据。

使用ui-router的解析将数据从ngResource注入控制器

1 个答案: