0

I want to use ui-router to assemble navigation through a series of pages in a dynamically defined sequence. Each template is from an independent module and could be reordered or skipped, so I don't want to hardcode the ui-sref attribute for the "next" button on each template.

What I'm aiming for is

  • User clicks next button
  • Routing controller looks up which state this particular user should go to next (varies for each user), and pulls out the appropriate parameters
  • Routing controller calls $state.go('nextstate', params)

How can I put a generic button on the page, like say

<a ui-sref="next">

The FutureStates add-on seems like overkill for this, all the states are already defined, I just don't know until runtime what order they should be called in.

I have complex parameters that I want to pass to the state that cannot be placed on the url.

ChrisJ
  • 2,486
  • 21
  • 40
  • possible duplicate of [Dynamically set the value of ui-sref Angularjs](http://stackoverflow.com/questions/24349731/dynamically-set-the-value-of-ui-sref-angularjs) – jme11 Jul 04 '15 at 14:11
  • There's also this one: http://stackoverflow.com/questions/23476296/dynamically-constructed-ui-sref-attribute-in-ui-router and this open issue: https://github.com/angular-ui/ui-router/issues/395 – jme11 Jul 04 '15 at 14:14

1 Answers1

0

After sleeping on it I realised the easier option in my case was to use ng-click (especially as I'm passing parameters that are not easy to encode):

<a href="" ng-click="next()">

<script>
   function next() {
       $state.go(theNextState, { arg1: { subArg: nestedObject } } );
   }
</script>

Here's a working example: http://plnkr.co/edit/CnNv08Cfb2dpRsnoOxY8

I'll pop this code into a directive so the different modules just need to do

<next-button>

in their templates.

In some cases this may cause accessibility issues, since ng-click won't fire if navigated by keyboard, but in my context that's not a problem (as I'll be using <button> for which it does fire on keyboard). For others interested in making this solution accessible, there's a discussion here:

http://jakub-g.github.io/accessibility/onclick/

ChrisJ
  • 2,486
  • 21
  • 40