如何正确地交换垂直药片和标签之间的屏幕分辨率与角用户界面引导？

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是重复的)。

你现在知道我怎样才能在控制器里正确地处理它吗？

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>