AngularJS:通过数据与$ state.go在角UI路由器声明 [英] AngularJS : Pass data to state with $state.go in angular-ui-router
问题描述
我在做一个文档编辑器。文档可以是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路由器声明的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!