ui路由器动态定义";下一个";运行时的状态

ui-router dynamically define "next" state at runtime

本文关键字：quot 运行时 状态 下一个 路由器 动态 ui 定义      更新时间：2023-09-26

我想使用ui路由器以动态定义的顺序组装一系列页面的导航。每个模板都来自一个独立的模块，可以重新排序或跳过，所以我不想硬编码每个模板上"下一个"按钮的ui sref属性。

我的目标是

  • 用户单击"下一步"按钮
  • 路由控制器查找该特定用户应该处于的状态转到下一步(每个用户都会有所不同(，并提取相应的参数
  • 路由控制器调用$state.go('extstate'，params(

我怎么能在页面上放一个通用按钮，比如

<a ui-sref="next">

FutureStates插件对此似乎有些过头了，所有的状态都已经定义好了，直到运行时我才知道它们应该按什么顺序调用。

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

睡过之后，我意识到在我的情况下，更容易的选择是使用ng点击(尤其是当我传递不容易编码的参数时(：

<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/

相关文章：