Change a url parameter in the current state from ui-sref in angular-ui-router

Question

Using ui-router I would like to set a URL parameter no matter what state I'm in. A use-case for this is to switch between bookmarkable interface modes (e.g. "boring" or "funny").

I know it can be done using ng-click directive, but in this case I'm left with href-less anchors, which is not very useful.

I have tried the most obvious ui-sref=".({foo:'bar'})" but it fails with "No reference point given for path '.'"

Does ui-router have a native solution to do this? Ideally I would like to have something like:

<a ui-sref="currentState({interface:'boring'})">boring</a>
<a ui-sref="currentState({interface:'fun'})">fun</a>

Answer 1

It seems that this functionality is available in the yet unreleased master branch of ui-router:

<a ui-sref="{foo:'bar'}">foobar</a>

See the related issue: https://github.com/angular-ui/ui-router/issues/1031

Answer 2

Or for the time being you can do something like this in the controller or in app run as I prefer to do it so it's available everywhere (each view):

appModule.run(function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from) {
            $rootScope.previousState = from.name;
            $rootScope.currentState = to.name;
        });
    });

Then should then be able to use:

<a ui-sref="{{currentState}}({interface:'boring'})">boring</a>

Answer 3

I know this is old topic but

ui-sref="."

should work.

https://github.com/angular-ui/ui-router/pull/2541