如何根据 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>

我想将其转换为适用于移动设备的垂直 "pills" 标签集。

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

它 "works" 但我认为它不是很有效。我对指令也有这样的问题，因为一些元素被定义了两次（ng-include 是重复的）。

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

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>

如何根据 angular-ui-bootstrap 的屏幕分辨率在垂直药丸和标签之间正确切换？

How to properly swap between vertical pills and tabs based on screen resolution with angular-ui-bootstrap?

javascript

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap