內部標籤中的角度材質標籤問題

Question

當我使用md-tabs將其中一個標籤放在另一個標籤中時，我嘗試在md-align-tabs屬性的上部標籤上更改，它也反映在內部標籤中。

我怎樣才能阻止這種情況發生

<md-content layout="column" layout-fill> 
 
\t <md-tabs layout="column" class="md-primary" md-selected="data.selectedIndex" md-align-tabs="{{checks[data.selectedIndex] ?'bottom':'top'}}" layout-fill > 
 
     <md-tab id="Tab{{checkBottom}}" ng-repeat="checkBottom in checkDataBottom"> 
 
     <md-tab-label>Tab{{checkBottom+1}}</md-tab-label> 
 
      <md-tab-body> 
 
\t \t <div class="md-padding" layout="row" layout-sm="column" layout-align="left center"> 
 
      <md-checkbox ng-value="true" ng-model="checks[checkBottom]" ng-change="change()" aria-label="Align tabs to bottom?" style="margin: 5px;">Tab to bottom</md-checkbox> 
 
      <md-content layout="column" layout-fill> 
 
       <md-tabs layout="column" class="md-primary" md-selected="data2.selectedIndex" md-align-tabs="{{checksX[data2.selectedIndex] ?'bottom':'top'}}" layout-fill > 
 
       \t <md-tab id="Tab{{checksXy}}" ng-repeat="checksXy in checkDataBottom"> 
 
        \t <md-tab-label>Tab{{checksXy+1}}</md-tab-label> 
 
        \t <md-tab-body> 
 
\t \t \t \t  <div class="md-padding" layout="row" layout-sm="column" layout-align="left center"> 
 
      \t \t  <md-checkbox ng-value="true" ng-model="checksX[checksXy]" ng-change="change()" aria-label="Align tabs to bottom?" style="margin: 5px;">Tab to bottom</md-checkbox> 
 
         </div> 
 
      \t \t </md-tab-body> 
 
       \t </md-tab> 
 
       </md-tabs> 
 
      \t </md-content> 
 
     </div> 
 
     </md-tab-body> 
 
     </md-tab> 
 
     </md-tabs> 
 
    </md-content>

Answer 1

它看起來像在角材料的某種錯誤。 但是儘量

md-tabs[md-align-tabs="top"] > md-tabs-wrapper{ 
    bottom: initial; 
    left: initial; 
    right: initial; 
    position: initial; 
    height: initial; 
    z-index: initial; 
} 

添加到您的CSS文件，我認爲這將有助於。

這裏是codepen例如：http://codepen.io/anon/pen/qRNmwV