使用 Angular 和 ui-router 跨深度状态保留/传递参数答案

【问题标题】：Retaining/passing parameters across deep states with angular and ui-router使用 Angular 和 ui-router 跨深度状态保留/传递参数
【发布时间】：2014-08-08 09:46:13
【问题描述】：

我正在尝试设置复杂的 URL 结构：

http://example.com/quote/:param1/:param2/:param3/:param4

每个州都使用相同的模板，除了 1。

我的问题是，有没有办法在没有多个模板的情况下将每个参数动态传递到下一个状态？还是我需要设置单独的模板并只更改 ui-sref

这是我的状态：

.state('quote', {
    url: '/quote',
    ...
})

.state('quote.policy', {
    url: '/',
    templateUrl: 'partials/quote/quote.select.html',
    page: {next: 'location'}
    ...
})

.state('quote.location', {
    url: '/:policy',
    templateUrl: 'partials/quote/quote.select.html',
    page: {next: 'age'}
    ...
})

.state('quote.age', {
    url: '/:policy/:state',
    templateUrl: 'partials/quote/quote.select.html',
    page: {next: 'income'}
    ...
})

.state('quote.income', {
    url: '/:policy/:state/:age',
    templateUrl: 'partials/quote/quote.income-select.html',
    page: {next: 'priority'}
    ...
})

.state('quote.priority', {
    url: '/:policy/:state/:age/:income',
    templateUrl: 'partials/quote/quote.select.html',
    ... 
})

每个参数都带有一个子引用状态。他们都使用相同的模板：

snippet from partials/quote/quote.select.html

<label 
    ng-repeat="option in options[page.type]"
    ui-sref="quote.{{page.next}}({ page.type : option.value })" 
    ng-click="formData.selections[page.type] = option.value">

我遇到的另一个问题是当前的 ui-sref 没有将值传递给 URL，即没有附加新值。

【问题讨论】：

各州不应该是彼此的孩子吗？ IE。 quote.income 应该是 quote.policy.location.age.income?
啊...这是一个非常有效的观点！抱歉，我是 Angular 的新手，所以还在学习。当我在自己的代码中解决它时，我会用解决方案更新问题。

标签： javascript angularjs angular-ui-router

【解决方案1】：

好的，对于任何有类似问题的人，我自己想通了。有几件事我做错了。这也是重构的。

首先，ui-sref（奇怪地）需要属性是一个表达式：

<label ui-sref="{{ page.next }}({ {{ page.type }} : option.value })">

我想这是有道理的，因为如果没有 obj[prop] 语法，您不能使用变量代替属性。

与 haxxxton 关于逐个嵌套状态的建议相反，我坚持将它们仅向下一层，即quote.policy、quote.age 等。这是我使用的最深状态的示例：

.state('quote.show', {
    url: '/:policy/:state/:age/:income/:priority/:i',
    templateUrl: '/partials/quote/quote.show.html',
    controller: 'QuoteController'
})

记下网址。

为了让它工作，我挠了挠头。我必须将每个 过去选择的参数 传递到下一个状态，这并不简单，因为各州不知道其他州的参数。

$stateChangeStart 来救援（在父状态控制器中）：

$scope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){
    _.each(fromParams, function(val, key){
        toParams[key] = val;
    })
});

由于前一个状态的参数和被推送到下一个状态的参数在这个事件中都是可用的，所以我每次都可以添加参数。惊人的！不幸的是，每种方法都需要下划线才能获得密钥 - 如果有更好的方法，请告诉我！

这让我可以实现这个工作 URL：http://example.com/#!/quote/Sgl/NSW/31-37/tier3/all/

当然很容易将每个阶段的关键字添加到 URL 中，即http://example.com/quote/policy/Sgl/state/VIC...，方法是在状态定义的 URL 中反映它，但我们不想要这种方法。

转角！！

【讨论】：