javascript - angular-ui-bootstrap:如何在垂直和水平选项卡集 View 之间切换

Question

目前我使用通过 Controller $scope.isNotMobileView 传递给模板的 isNotMobileView:

<uib-tabset active="0" vertical="isNotMobileView">
  <uib-tab index="0" heading="foo">
    ...
  </uib-tab>
  ...
</uib-tabset>

但是，当我切换方向/切换屏幕尺寸时，这不会动态更改呈现的 uib-tabset。我怎么做？ (我正在寻找与 Twitter bootstrap 的 hidden-xs 等元素类似的行为，当我改变屏幕尺寸时隐藏和改变元素)我不想复制 uib-tabset 因为它不会那么可维护。

Answer 1

来自文档

vertical $ (Default: false) - Whether tabs appear vertically stacked.

$ 符号表示属性期望和表达式，但它没有应用观察器

$ - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.

这意味着您提供一个表达式，该表达式将解析为 true 或 false，并将您的选项卡集初始化为该设置，但您以后不能更改它。

I do not want to duplicate the uib-tabset as it wouldn't be that maintainable.

除非你想请求一个功能或自己实现它，否则你必须制作一个副本并使用 ngIf 或其他东西来切换它。 您可以根据索引值在选项卡集之外显示和隐藏指令，使它们更易于维护(小)，active 属性对其进行监视

active (Default: Index of first tab) - Active index of tab. Setting this to an existing tab index will make that tab active.