从控制器更改路由参数

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) 最后还有一个plunker，表明这个功能可以开箱即用：

有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>

观察example 以查看它的实际效果...

EXTEND：查看来自ui-sref doc的注释

关于相对 ui-sref 目标的说明：

您还可以在ui-sref 中使用相对状态路径，就像传递给state.go() 的相对路径一样。 您只需要注意路径是相对于链接所在的状态，即加载包含链接的模板的状态。