Change route parameter from controller

Question

I have state defined like this:

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

I have buttons defined for languages, which should navigate to exact same url except of lang parameter should be changed:

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

Is it possible?

Answer 1

I wrote own directive for this purpose:

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);
            });
        }
    };
}]);

usage:

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

Answer 2

I would say, that this feature is already built in the ui-router .

1) As documented here:

• ui-sref

ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state , following the same syntax rules as $state.go()

2) And the doc here

• $state.go(to [, toParams] [, options]) (older doc, deprecated, but ... so clear)

The name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.

Some examples:

$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) And finally there is a plunker , showing that this feature could be used out of the box:

Having 2 states (the above plus its 'app.child') we can use this syntax inside of the 'app' state

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

And this could be used in the child:

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

Observe the example to see it in action...

EXTEND: Check the note from the ui-sref doc

A note on relative ui-sref targets:

You can also use relative state paths within ui-sref , just like the relative paths passed to state.go() . You just need to be aware that the path is relative to the state that the link lives in, in other words the state that loaded the template containing the link.