Wie man zwischen vertikalen Pillen und Tabs basierend auf der Bildschirmauflösung mit angular-ui-bootstrap richtig wechselt?

Question

Ich habe eine Standard (horizontale) Registerkarte mit eckigen-Ui-Bootstrap gemacht.

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

Ich möchte es in eine vertikale "Pillen" Tabset für mobile verwandeln.

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

Da ich mit Bootstrap 3 Arbeits bin habe ich versucht, die folgende Abhilfe:

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

Es „funktioniert“, aber ich denke, es ist nicht wirklich effizient ist. Ich habe auch Probleme mit Direktiven, da einige Elemente doppelt definiert sind (ng-include sind Duplikate).

Kannst du jetzt, wie ich es richtig in einer Steuerung oder so handhaben könnte?

Answer 1

Anstatt Code zu duplizieren, können Sie etwas in den Zeilen tun:

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