html - 使用 Angular Material 将仅按钮添加到 md-tab

Question

我想添加一个按钮，它只是一个按钮，没有选项卡效果，我将用它来添加更多选项卡。我阅读了 和 指令文档，但找不到如何执行此操作。

这是我的代码片段:

<div ng-controller="AppCtrl" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="MyApp">
  <md-content class="md-padding">
    <md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
      <md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
        <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
          <div ng-bind="tab.content"></div>
          <br>
          <md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
        </div>
      </md-tab>
      <md-tab > 
        <md-tab-label>
          <md-icon>add_box</md-icon>
        </md-tab-label>
     </md-tab>
    </md-tabs>
  </md-content>

  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
    <div layout="row" layout-sm="column">
      <div flex="" style="position: relative;">
        <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
      </div>
      <md-input-container>
        <label for="label">Label</label>
        <input type="text" id="label" ng-model="tTitle">
      </md-input-container>
      <md-input-container>
        <label for="content">Content</label>
        <input type="text" id="content" ng-model="tContent">
      </md-input-container>
      <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
    </div>
  </form>
</div>

http://codepen.io/anon/pen/ZBEvVb

Answer 1

尝试使用Navigation Bar因为它的性能更好并且直接与路线一起使用。在这种情况下，您也可以根据需要定义按钮。这是您需要的示例代码。

<md-content class="md-padding">
 <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
  <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
  <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
  <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
  <span flex></span>
  <md-button class='md-primary md-raised'>Button</md-button>
</md-nav-bar>
 <div class="ext-content">
  External content for `<span>{{currentNavItem}}</span>
 </div>
</md-content> 

这是working codepen .