Question

我正在使用Angular UI-Router并且需要具有单个父状态，其他几个状态可以继承解析的结果。我已经尝试过在这里找到的所有解决方案，但是没有工作。我的州看起来像这样：

.state('transaction', {
    abstract:true,
    url: '/register/pos/:screen/:document_sid',
    template:'<div ui-view></div>',
    resolve: {
        Document: //the thing I need to have all the children access
    }
})
.state('transaction.view', {
    url:'',
    views:{
        '':{
            templateUrl: '/views/docs/pos-transaction-outer-partial.htm',
            controller:'posdocumentController'
        }
    }
})
.state('transaction.edit', {
    url: '/:mode',
    views:{
        '':{
            templateUrl: '/views/docs/pos-transaction-outer-partial.htm',
            controller:'posdocumentController'
        }
    }
})
.state('transaction.returns', {
    url: '/returns',
    views:{
        '':{
            templateUrl: '/views/pos-itemreturn-partial.htm',
            controller: 'posItemReturnsController'
        }
    }
})

当我使用$state.go('transaction.edit')时，它完美无缺。在'posdocumentController'里面我有一个调用$state.go('transaction.returns')的函数，我可以看到路由更改和部分请求，但视图永远不会改变。根据{{3}}的文档，指定的视图应加载到模板中包含的父UI视图中。显然，对我而言，这并没有发生，对于我的生活，我一直无法弄清楚为什么。我已经尝试了这个有和没有视图选项，并获得相同的结果。有人可以解释为什么以及如何解决这个问题？

Answer 1

详细信息隐藏在......非常小的细节中，在这种情况下。

予。为什么不工作？

以下是plunker with broken导航（完全如上述问题所述）

这些是对上述状态的调用：

ui-sref
transaction.view ({ screen: 1 ,document_sid:2 ,mode:5 })
transaction.edit ({ screen: 1 ,document_sid:2 ,mode:5 })
transaction.returns ({ screen: 1 ,document_sid:2 ,mode:5 })

href
#/register/pos/1/2
#/register/pos/1/2/5
#/register/pos/1/2/returns

所以，虽然这些似乎是正确的状态调用，但最后两个，编辑和返回，可以被观察为：

// edit link result
params
{
  "screen": "1",
  "document_sid": "2",
  "mode": 5
}
state
{
  "url": "/:mode",
  ...

// returns link result
params
{
  "screen": "1",
  "document_sid": "2",
  "mode": "returns"
}
state
{
  "url": "/:mode",

现在应该很清楚。第三个链接（状态returns）实际上是再次导航到edit 。为什么？因为这个州的定义：

.state('transaction.edit', {
    url: '/:mode',     // here we say :mode is param
    ...
.state('transaction.returns', {
    url: '/returns',   // and 'returns' here is already mapped... above as :mode

检查not working solution here

II。如何使其工作

指向working plunker的链接。所做的改变是：

首先定义returns然后定义edit州

.state('transaction.returns', {
    url: '/returns',   // 'returns' would be evaulated first, and used
    ...
.state('transaction.edit', {
    url: '/:mode',     // only other then returns values will be used here

工作解决方案是here

其他解决方案，也许更好，是使用一些正则表达式来缩小：模式值：Regex Parameters

'/user/{id:[^/]*}' - 与上一个示例中的'/user/{id}'相同。

'/user/{id:[0-9a-fA-F]{1,8}}' - 与前面的示例类似，但只有在id参数包含1到8个十六进制数字时才匹配。

'/files/{path:.*}' - 匹配以'/files/'开头的所有网址，并将其余路径捕获到参数＆＃39;路径＆＃39;。

'/files/*path' - 同上。赶上所有的特殊语法。

UI-Router嵌套状态没有嵌套视图

1 个答案:

予。为什么不工作？

II。如何使其工作