從控制器更改路徑參數

Question

我有這樣定義的狀態：

stateProvider
        .state('app', {
            templateUrl: 'views/layout.html',
            url: '/:lang/app',
            resolve: {
                lang: ['$rootScope', '$stateParams', function(rootScope, stateParams){
                    return stateParams.lang;
                }]
            }
        });

我為語言定義了按鈕，這些按鈕應導航到完全相同的url，但應更改lang參數：

<a ui-sref="???({ lang: 'en' })"> English </a>

可能嗎？

Answer 1

為此，我編寫了自己的指令：

angular.module('app').directive('uiSrefParams', ['$state', function(state){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.click(function(){
                var params = scope.$eval(attrs['uiSrefParams']);
                state.go(state.$current, params);
            });
        }
    };
}]);

用法：

<a ui-sref-params="{ lang: 'en' }"> English </a>

Answer 2

我要說的是，該功能已經內置在ui-router 。

1）如此處記錄：

• UI的SREF

ui-sref='stateName'導航至狀態，無參數。 'stateName'可以是任何有效的絕對或相對狀態 ，遵循與$state.go()相同的語法規則

2）這里的文檔

• $ state.go（to [，toParams] [，options]） （較舊的文檔，已棄用，但很清晰）

將轉換到的狀態名稱或相對狀態路徑。 如果路徑以^或開頭. 那是相對的，否則是絕對的。

一些例子：

$state.go('contact.detail') will go to the 'contact.detail' state
$state.go('^') will go to a parent state.
$state.go('^.sibling') will go to a sibling state.
$state.go('.child.grandchild') will go to a grandchild state.

3）最后有一個插件 ，表明可以立即使用此功能：

具有2個狀態（上面加上其“ app.child”），我們可以在“ app”狀態內使用此語法

<a ui-sref=".({ lang: 'en' })"> English </a> 
<a ui-sref=".({ lang: 'cz' })"> Czech </a>
<a ui-sref=".child({ lang: 'en' })"> Child English </a> 
<a ui-sref=".child({ lang: 'cz' })"> Child Czech </a>

這可以在孩子中使用：

<a ui-sref=".({ lang: 'en' })"> Sibling English </a> 
<a ui-sref=".({ lang: 'cz' })"> Sibling Czech </a>

觀察示例以了解其運行情況...

EXTEND：檢查ui-sref文檔中的注釋

有關ui-sref目標的說明：

您還可以在ui-sref使用相對狀態路徑，就像傳遞給state.go()的相對路徑一樣。 您只需要知道路徑是相對於鏈接所處的狀態的，換句話說，就是加載包含鏈接的模板的狀態。