AngularJS：通过数据与$ state.go在角UI路由器声明

问题描述：

我在做一个文档编辑器。文档可以是A型或B型。它们是由URL按文档代码访问，但该ID不说清楚，如果该文件是A型或B的。

I'm making a document editor. Documents can be Type A or Type B. They are accessed by url by document id, but the id does not make it clear if the document is of type A or B.

所以，我需要通过id来加载文档，从数据确定其类型，然后将它传递给无论是TypeAController或TypeBController。

So, I need to load the document by id, determine its type from its data, and then pass it to either the TypeAController or TypeBController.

现在，随着用户界面的路由器，我有这样的事情：

Right now, with ui-router, I have something like this:

$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', {...})

装载状态加载文档，确定其类型，然后进行到下一状态。

The loading state loads the document, determines its type, and then goes to the next state.

无奈的是，虽然，我不能找到一种方法来实际加载的文件传递给下一个状态！我可以做一个globalish服务到我可以插入文档，或者我可以只传递文件的ID一起，又在每个状态（从缓存这次希望）加载它，但这些方法是如此笨拙和其他一切对角与角的UI一直顺风顺水。

Frustratingly, though, I can't find a way to actually pass the loaded document to the next states! I can make a globalish service into which I can insert the document, or I can just pass the id of the document along and load it again in each state (hopefully from a cache this time), but these methods are so clunky and everything else about angular and angular-ui has been so smooth.

有什么建议？

答

一种解决方案可能是将其移动到父的状态，这是提供给所有儿童。事情是这样的：

One solution could be to move it to the parent state, which is available to all children. Something like this:

$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 重新presents的参考文件共享。

The $scope.model.doc represents the reference to the shared document.

下面（ UI-例如路由器 - contact.js 的），我们可以看到父母是如何设置的联系人收藏，所有子状态访问它。该 rel=\"nofollow\">例如

Here (UI-Router example - contact.js) we can see how parent is setting the contacts collection, all child states are accessing it. The example in action

AngularJS：通过数据与$ state.go在角UI路由器声明

相关推荐