使用角度和ui路由器在深層狀態中保留/傳遞參數

Question

我正在嘗試建立一個復雜的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，即不會追加新值。

Answer 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'
})

記下URL。

為了使它正常工作，我撓了一下頭。 我必須將過去選擇的每個參數傳遞給下一個狀態，這並不簡單，因為這些狀態不了解其他狀態的參數。

$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/ : http://example.com/#!/quote/Sgl/NSW/31-37/tier3/all/

當然，通過在狀態定義的URL中反映每個階段的關鍵字到http://example.com/quote/policy/Sgl/state/VIC... ，這很容易，但是我們不想這種方法。

來吧！