angular-ui-bootstrap：如何在垂直和水平选项卡集视图之间交换

Question

目前我使用isNotMobileView通过控制器$scope.isNotMobileView传递给模板：

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

但是，当我切换方向/切换屏幕尺寸时，这不会动态更改呈现的uib-tabset。我怎么做？ （我正在寻求与 Twitter 引导程序的 hidden-xs 等元素类似的行为，这些元素会在我更改屏幕大小时隐藏和更改元素）我不想复制 uib-tabset，因为它不会那么可维护。

Answer 1

来自文档

vertical $ (默认: false) - 选项卡是否垂直堆叠显示。

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

$ - 此设置需要角度表达式而不是文字字符串。如果表达式支持布尔/整数，则可以直接传递。

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

我不想复制 uib-tabset，因为它不那么可维护。

除非您想请求某个功能或自行实现它，否则您必须复制并使用ngIf 或其他方式切换它。 您可以根据索引值在选项卡集之外显示和隐藏指令，使它们更易于维护（小），active 属性对其进行了监视

active（默认值：第一个选项卡的索引）- 选项卡的活动索引。将此设置为现有选项卡索引将使该选项卡处于活动状态。