ui-router 在运行时动态定义“下一个”状态

Question

我想使用 ui-router 以动态定义的顺序在一系列页面中组合导航。 每个模板都来自一个独立的模块，可以重新排序或跳过，所以我不想为每个模板上的“下一步”按钮硬编码 ui-sref 属性。

我的目标是

• 用户点击下一步按钮
• 路由控制器查找该特定用户应该处于哪个状态 转到下一个（因每个用户而异），并提取适当的参数
• 路由控制器调用 $state.go('nextstate', params)

如何在页面上放置通用按钮，例如说

<a ui-sref="next">

FutureStates 插件看起来有点过头了，所有的状态都已经定义好了，我只是直到运行时才知道它们应该以什么顺序被调用。

我有复杂的参数，我想传递给无法放在 url 上的状态。

Answer 1

睡在上面之后，我意识到在我的情况下更简单的选择是使用 ng-click（尤其是当我传递不容易编码的参数时）：

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

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

这是一个工作示例：http://plnkr.co/edit/CnNv08Cfb2dpRsnoOxY8

我会将此代码弹出到一个指令中，以便不同的模块只需要这样做

<next-button>

在他们的模板中。

在某些情况下，这可能会导致可访问性问题，因为 ng-click 在通过键盘导航时不会触发，但在我的上下文中这不是问题（因为我将使用 ，因为它会在键盘上触发）。对于有兴趣使此解决方案易于访问的其他人，请在此处进行讨论：

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