如何将内容添加到 Angular 材质选项卡答案

【问题标题】：How to add content to Angular Material Tabs如何将内容添加到 Angular 材质选项卡
【发布时间】：2016-11-27 08:07:50
【问题描述】：

我正在尝试将标签放在带有角度材料的工具栏中。

我找到了一个很好的例子：

<md-toolbar layout="row" layout-align="center end">
    <div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
        <span flex></span>
        <md-tabs  md-stretch-tabs="always" class="md-primary">
            <md-tab id="tab1" aria-controls="Tab 1">
                <md-tab-label>Tab 1</md-tab-label>
            </md-tab>
            <md-tab id="tab2" aria-controls="Tab 2">
                <md-tab-label>Tab 2</md-tab-label>
            </md-tab>
        </md-tabs>
    </div>
</md-toolbar>

效果很好，只是我不知道如何添加内容。

如果我将<md-tab-body> 标记放在<md-tab> 标记内，则工具栏会展开并且新内容在工具栏中，这是我不想要的。我希望标签内容位于工具栏下方。

我刚开始使用有棱角的材料，所以我觉得我缺少一些基本的东西。

查看选项卡文档，似乎使用带有外部内容的选项卡可能有用，但文档没有说明如何做到这一点。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

我认为这应该对您有所帮助，我是新手但是通过阅读文档代码here，我发现可以使用md-tab-body添加内容。所以我试着让你看到这个codepen。我在md-tab-label 下方添加了md-tab-body。希望这对您有所帮助。谢谢你给我看这么好的设计材料。

在此处添加我的代码：

<md-toolbar layout="row" layout-align="center end">
<div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
    <span flex></span>
    <md-tabs  md-stretch-tabs="always" class="md-primary">
        <md-tab id="tab1" aria-controls="Tab 1">
            <md-tab-label>Tab 1</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab One</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
    </md-tab-body>
        </md-tab>
        <md-tab id="tab2" aria-controls="Tab 2">
            <md-tab-label>Tab 2</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab Two</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
    </md-tab-body>
        </md-tab>
    </md-tabs>
</div></md-toolbar>

编辑1 好的。但我认为你的问题没有提到任何关于颜色的内容。这些也可以用 css 完成。现在我更新了codepen，你可以看到here 或here 或其他颜色here。希望这对您有所帮助。如果这对您有帮助，请评价我的回答。

编辑2 好的。在网上搜索更多之后，我发现可以使用名为md-selected 的东西来跟踪选择了哪个选项卡。然后基于on我使用的那个索引的值ng-switch-when这个值就是那个索引。它与普通的Switch-case 语句类似。我还删除了那个 css，所以它变得更加清晰。你可以看到解决方案here。我希望我的解决方案对你来说很清楚。我试图让它尽可能简单。谢谢。

【讨论】：

这就是我试图避免的。查看您的示例中的内容如何在蓝色工具栏中。我想要蓝色工具栏中的选项卡，但导航栏下方白色部分的内容。
带有该标签正文的内容仍位于工具栏中。我希望选项卡内容位于工具栏之外。在您的示例中，您可以看到棕色工具栏颜色如何仍然包裹所有内容。
@lostintranslation 感谢您的说明。我已编辑我的答案请参阅 Edit2。希望这次能帮到你。让我知道如果我仍然错了，我会再试一次。谢谢。
嗨@govindpatel 我已经使用了您的代码并面临以下问题 angular.min.js:6 Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.5.8/$injector/…...FC%3A%2FUsers%2FKH1983%2FDesktop% 2FWebEaxmples%2Fangular.min.js%3A20%3A390) 你能告诉我，我错过了什么
好的。没有代码我什么都猜不出来。感觉你可能错过了一些可能检查你的脚本语句的东西。接近那个的东西。但是你怎么会在angular.min.js:6 中得到错误。请再次仔细查看您的代码。如果您仍然收到错误消息。另请参阅我提供的代码笔并与您的代码进行比较。如果您仍然遇到问题，请像我一样将代码粘贴到 jsfiddle 或 codepen 中。谢谢，

【解决方案2】：

我知道这有点晚了，但你去吧......

HTML：

<html>
  <head>
    <style>.intermediate { background:lightgray; }</style>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css">
  </head>
  <body ng-app="myApp">
    <div>
      <div ng-controller="TabCtrl" layout="column">      
        <md-toolbar layout="column" layout-align="end">
          <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="tab1" ng-click="tabClicked('tab1')"></md-tab>
            <md-tab label="tab2" ng-click="tabClicked('tab2')"></md-tab>
            <md-tab label="tab3" ng-click="tabClicked('tab3')"></md-tab>
          </md-tabs>
        </md-toolbar>
        <div layout="row" layout-padding class="intermediate">Intermediate element1</div>
        <div layout="row" layout-padding class="intermediate">Intermediate element2</div>
        <div layout="row" layout-padding class="intermediate">Intermediate element3</div>      
        <md-content flex layout-fill layout-padding ng-bind-html="tabContent">
          <!-- tab content gets injected here -->        
        </md-content>      
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
  </body>
</html>

JS：

var app = angular.module('myApp', ['ngMaterial']);

app.controller('TabCtrl', ['$scope', '$sce', function($scope, $sce) {

  // manually update associated tab content
  $scope.tabClicked = function(tab) {
  switch (tab) {
    case 'tab1':
      $scope.tabContent = $sce.trustAsHtml('<strong class="md-display-1">TAB1 CONTENT</strong>');
      break;
    case 'tab2':
      $scope.tabContent = $sce.trustAsHtml('<em class="md-display-2">TAB2 CONTENT</em>');
      break;
    case 'tab3':
      $scope.tabContent = $sce.trustAsHtml('<div class="md-display-4">TAB3 CONTENT</div>');
      break;
    }
  }

  // Initialize default content
  $scope.tabClicked('tab1');
}]);

Codepen

【讨论】：

【解决方案3】：

这是 Angular 材质的操作方法

在“Angular Material 2 Jeremy Elbourn 和 Kara Erickson”演示文稿的 LeashedIn 演示应用程序中：https://www.youtube.com/watch?v=0q9FOeEELPY

他们使用这个代码：

<md-tab-group>
    <md-tab>
        <template md-tab-label>TAB 1 LABEL</template>
        <template md-tab-content>TAB 1 CONTENT</template>
    </md-tab>
    <md-tab>
        <template md-tab-label>TAB 2 LABEL</template>
        <template md-tab-content>TAB 2 CONTENT</template>
    </md-tab>
  </md-tab-group>

但它对我不起作用！

这对我有用：

<md-tab-group>
    <md-tab label="TAB 1 LABEL">
        TAB 1 CONTENT
    </md-tab>
    <md-tab label="TAB 2 LABEL">
        TAB 2 CONTENT
    </md-tab>
</md-tab-group>

来源： https://github.com/angular/material2/blob/master/src/lib/tabs/README.md

【讨论】：

为angularjs material 版本而不是angular material2 请求的OP。
还要注意还有更多的文档here