Question

我正在制作文档编辑器。文档可以是类型A或类型B.它们可以通过文档ID按URL访问，但如果文档是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并在每个状态下再次加载它（希望这次从缓存中），但这些方法是如此笨重而且其他一切关于角度和角度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

Answer 2

您可以拥有Documents服务，该服务拥有并为所有文档数据提供API。然后控制器注入Documents服务，并引用他们感兴趣的文档范围。

类似的东西：

app.service('Documents', function(){
  Documents = {};

  return {
    open: function(doc_id) { ... }  // loads and caches doc (if not already cached) and returns a promise with a reference to Documents[doc_id]
    sync: function(doc_id) { ... }  // sync doc with server
    close: function(doc_id) { ... } // remove doc_id from Documents 
  };
});

app.controller('editX', function($scope, $stateParams, Documents){
  Documents.open($stateParams.documentId).then(function(ref){
    $scope.document = ref;
  });

  ...

})

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

2 个答案: