AngularJS ui-router reverting to otherwise when ng-click is used

Question

I'm playing around with AngularJS as a learning exercise. I'm trying to get to grips with AngularJS ui-router (https://github.com/angular-ui/ui-router) and I've hit a bit of a brick-wall with an issue I'm having.

I've put a plunk together to illustrate and reproduce.

http://plnkr.co/edit/OvmOKPMfeFqNWc7ToCff?p=preview

The above is a simple wizard type component with tabs across the top to move to a particular step, and some next/back buttons at the bottom to move to the next relevant page.

The tab navigation at the top works fine, and clicking along moves changes the view and URL accordingly.

However the behaviour of the next/back buttons are quite strange insofar they work the first time you click next, but not afterwards. You should be able to see what I'm talking about in the plunk.

It's looks like it tries to navigate to the correct view, but then immediately reverts to the otherwise rule.

I've added hooks into the code to trace through in the console. In essence all the next/back buttons do is called the relevant state so $state.go("step1"), $state.go("step3"), etc.

Hope I've provided enough info and would appreciate any insight anyone can bring.

Thanks.

Answer 1

You have to remove the '#' from the href attr on the anchors.

Answer 2

I haven't been able to figure out the exact cause, but it looks like the primary difference is with the provided relative stateObject that is passed to $state.go().

If you debug the source for ui-sref, you will notice their use of the go function:

$state.go(ref.state, params, { relative: base });

If you compare the base object used by your links, and the default ($state.$current) used by your internal controller calls to $state.go(nextStep) you will notice obvious differences.

While I don't see exactly why these are causing your issue, you can likely rectify it by updating your ui architecture. Create a parent state to which all the steps are children, nesting ui-views. Then use the parent state controller to keep track of steps, and manage forward and backward movements.