AngularJS：在angular-ui-router中使用$ state.go将数据传递到状态

一尘不染

AngularJS：在angular-ui-router中使用$ state.go将数据传递到状态

angularjs

我正在做一个文档编辑器。文档可以是Type A或TypeB。可以通过URL通过文档ID对其进行访问，但是如果文档是A或B类型，则该ID不能使它们清晰可见。

因此，我需要按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并在每种状态下再次加载它（希望这次是从缓存中加载），但是这些方法非常笨拙关于角度和角度用户界面的操作是如此顺利。

有什么建议？

阅读 252

2020-07-04

共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示例-contact.js），我们可以看到父级如何设置联系人集合，所有子状态都正在访问它。实际例子

2020-07-04