ui-sref from variable / attribute

Question

I am transitioning my SPA from ng-route to ui.router. This should be a quick one for someone...

For some of my states, I have $rootScope.nextState and $rootscope.prevState attributes defined (statename strings), so that I can have Previous and Next buttons / links on my navbar.

I can't seem to get the link correct. I have tried:

<button ui-sref="{{prevState}}">Previous</button>

<button ui-sref={{prevState}}>Previous</button>

<button ui-sref="{prevState}">Previous</button>

<button ui-sref="prevState">Previous</button>

<button ng-href="{{$state.href(prevState)}}">Previous</button>

<button ng-click="$state.go(prevState)">Previous</button>

All of the above with <a> instead.

All throw an "Invalid state ref" error or don't change the state. How can you use a dynamic attribute for statename in ui-router?

I have read and understood the docs to the best of my ability. Similar questions that haven't helped: https://stackoverflow.com/questions/23476296/dynamically-constructed-ui-sref-attribute-in-ui-router and https://stackoverflow.com/questions/24349731/dynamically-set-the-value-of-ui-sref-angularjs

Here's a Plunker recreating the problem. It uses resolve in a method similar to angular-ui-router-title. It might be the timing of things that's the issue...

Answer 1

For future readers, I went with @JB Nizet's suggestion.

HTML

<button ng-click="goPrevious()" ng-disabled="!previousState">Previous</button>
<button ng-click="goNext()" ng-disabled="!nextState">Next</button>

JS

app.run( function($rootScope, $state) {

  $rootScope.$on('$stateChangeSuccess', function () {

    var previous = $state.$current.locals.globals.$prevState;
    var next = $state.$current.locals.globals.$nextState;

    $rootScope.previousState = previous;
    $rootScope.nextState = next;

    if (typeof previous !== 'undefined') {
        $rootScope.goPrevious = function() { $state.go(previous); };
    } else {
        $rootScope.goPrevious = function() { console.log ("No previous state found"); };
    }
    if (typeof next !== 'undefined') {
        $rootScope.goNext = function() { $state.go(next); };
    } else {
        $rootScope.goNext = function() { console.log ("No next state found"); };
    }

  });
});