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()的相对路径一样。 您只需要知道路径是相对于链接所在的状态，换句话说是加载包含链接的模板的状态。

从控制器更改路由参数

2 个答案:

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