javascript - 如何使用 angular-ui-bootstrap 根据屏幕分辨率在垂直药丸和选项卡之间正确交换？

Question

我有一个使用 angular-ui-bootstrap 制作的默认(水平)选项卡集。

<uib-tabset active="0">
    <uib-tab index="0" heading="Foobar">
        <div ng-include="foobar.html"></div>
    </uib-tab>
    <!-- Other tabs... -->
</uib-tabset>

我想将其转换为移动设备的垂直“药丸”选项卡集。

<uib-tabset active="0" vertical="true" type="pills">
    <uib-tab index="0" heading="Foobar">
        <div ng-include="foobar.html"></div>
    </uib-tab>
    <!-- Other tabs... -->
</uib-tabset>

由于我正在使用 Bootstrap 3，因此我尝试了以下解决方法:

<div class="visible-xs-block">
    <uib-tabset active="0" vertical="true" type="pills">
        <uib-tab index="0" heading="foobar">
            <div ng-include="foobar.htm"></div>
        </uib-tab>
        <!-- Other tabs... -->
    </uib-tabset>
</div>

<div class="hidden-xs">
    <uib-tabset active="0">
        <uib-tab index="0" heading="foobar">
            <div ng-include="foobar.html"></div>
        </uib-tab>
        <!-- Other tabs... -->
    </uib-tabset>
</div>

它“有效”，但我认为它并不是真正有效。我对指令也有很多问题，因为某些元素被定义了两次(ng-include 是重复的)。

你现在知道我如何在 Controller 或其他东西中正确处理它吗？

Answer 1

您可以执行以下操作，而不是重复代码:

<uib-tabset active="0" vertical="myIsSmallScreenVariable" ng-attr-type="myIsSmallScreenVariable ? 'pills' : null">
  <uib-tab index="0" heading="foobar">
    <div ng-include="foobar.htm"></div>
  </uib-tab>
  <!-- Other tabs... -->
</uib-tabset>