在ui-router应用程序中使用选项卡，每个选项卡没有状态

Question

我目前正在使用ui-router开发一个角度appp，并希望在一个视图中使用制表符。由于典型的选项卡实现涉及使用相对链接（#tabId），它与ui-router状态更改冲突。 有没有办法实现标签而无需为每个标签创建状态？

提前谢谢。

Answer 1

如果您想要更改网址，请尝试使用查询字符串

state('app.sample', {
  url: '/sample?tab',
  params: {
    tab: {value: null, squash: true} // for make param optional
  }
}

或者像这样

state('app.sample', {
    url: '/sample/:tab',
    params: {
      tab: {value: null, squash: true}
    }
}

并且在控制器中，您可以使用$ stateParams

进行操作

$scope.currentTab = $stateParams.tab || 'defaultTab';

Answer 2

最后我使用了tab-collapse bootstrap插件（https://github.com/flatlogic/bootstrap-tabcollapse）。

我不得不改变一些代码以避免使用href属性，但设法使用制表符加上自动机制将标签转换为小型设备上的手风琴。