AngularJS : Pass data to state with $state. 进入 Angular-ui-router

Question

我正在制作一个文档编辑器。文档可以是A类型或者B类型，通过url通过文档id来访问，但是id并不能明确文档是A类型还是B类型。

因此，我需要通过 id 加载文档，从数据确定其类型，然后将其传递给 TypeAController 或 TypeBController。

现在，使用 ui-router，我有这样的东西:

$stateProvider
.state('loading', {
    url: '/{documentId}',
    template: 'Loading...',
    controller: function ($stateParams, $state) {
        loadDocument($stateParams.documentId)
            .then(function (loadedDocument) {
                if (loadedDocument.type === 'A') {
                    $state.go('EditA');
                } else if (loadedDocument.type === 'B') {
                    $state.go('EditB');
                }
            })
    }
})
.state('A', {...})
.state('B', {...})

加载状态加载文档，确定其类型，然后进入下一个状态。

但令人沮丧的是，我找不到一种方法将加载的文档实际传递到下一个状态!我可以创建一个全局服务，可以将文档插入其中，或者我可以只传递文档的 id 并在每个状态下再次加载它(希望这次是从缓存)，但这些方法是如此笨重，其他一切都如此关于 Angular 和 Angular-UI 一直如此顺利。

有什么建议吗？

Answer 1

一种解决方案是将其移至所有子级都可用的父级状态。像这样的事情:

$stateProvider
.state('loading', {
    url: '/{documentId}',
    template: 'Loading...',
    controller: function ($scope, $stateParams, $state) {
        loadDocument($stateParams.documentId)
            .then(function (loadedDocument) {

                // assign the document to the parent model $scope
                // in this case $scope.model.doc  
                $scope.model = { "doc" : loadedDocument };
                if (loadedDocument.type === 'A') {
                    $state.go('.EditA');
                } else if (loadedDocument.type === 'B') {
                    $state.go('.EditB');
                }
            })
    }
})
.state('loading.EditA', {...}) // here we can use the $scope.model.doc
.state('loading.EditB', {...}) // in every child state

$scope.model.doc 表示对共享文档的引用。

在这里( UI-Router example - contact.js )我们可以看到父级如何设置联系人集合，所有子级状态都在访问它。 example in action