Html md选项卡未出现在页面上_Html_Angularjs_Angularjs Material

Html md选项卡未出现在页面上

html angularjs

Html md选项卡未出现在页面上,html,angularjs,angularjs-material,Html,Angularjs,Angularjs Material,我试图设置一个简单的索引页面，其中有两个选项卡（首先），每个选项卡都只有一个占位符文本输入元素，但是当工具栏正确显示时，这两个选项卡根本不显示（不仅仅是选项卡的内容，选项卡本身也不显示）。我以前在其他项目中使用过md选项卡，所以我怀疑我的设置有误，但我不确定是什么。在开发人员模式下，我可以看到选项卡的引用，但当我选择它们时，它们在页面上永远不会被调用。确实会调出周围的选项卡，但没有一个单独的选项卡会调出。控制器“mainController”中的“ng init”调用确实被调用，因此选项卡的内容

我试图设置一个简单的索引页面，其中有两个选项卡（首先），每个选项卡都只有一个占位符文本输入元素，但是当工具栏正确显示时，这两个选项卡根本不显示（不仅仅是选项卡的内容，选项卡本身也不显示）。我以前在其他项目中使用过md选项卡，所以我怀疑我的设置有误，但我不确定是什么。在开发人员模式下，我可以看到选项卡的引用，但当我选择它们时，它们在页面上永远不会被调用。确实会调出周围的选项卡，但没有一个单独的选项卡会调出。控制器“mainController”中的“ng init”调用确实被调用，因此选项卡的内容得到了处理，但选项卡从不显示。任何帮助都将不胜感激，这是我第一次尝试自己建立这个

以下是索引页的HTML：

<body style='padding-left: 0px' ng-app="tinkerApp">
<md-toolbar layout="row" style="background-color: rgb(255, 255, 222);">
<h1><b>ENGINE TEST</b></h1>
</md-toolbar>
    <md-content>
        <md-tabs md-dynamic-height md-border-bottom style='padding-left: 10px' md-stretch-tabs="always"> 
            <md-tab label="HOME" id="home">
                <md-content>
                    <div ng-controller="mainController" ng-init="initPage()">
                    <input type="text" class="form-control-sm" id="command"
                        name="command" ng-model="page.command"
                        style='width: 300px; height: 25px' />
                    </div>
                </md-content>
            </md-tab>
            <md-tab label="ENGINE" id="engine">
                <md-content>
                    <div ng-controller="mainController" ng-init="initPage()">
                    <input type="text" class="form-control-sm" id="command2"
                        name="command2" ng-model="page.command2"
                        style='width: 300px; height: 25px' />
                    </div>
                </md-content>
            </md-tab>
        </md-tabs>
    </md-content>

下面是我在index.html中调用的css和脚本数据

<!--********* CSS *********-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/ng-modal.css" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/select.css">

<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/ag-grid.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-fresh.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-dark.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-blue.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-extreme.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-material/angular-material.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/se-1.2.2/datatables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" />

<link rel="icon" type="image/png" href="favicon.png" sizes="16x16">

<!--********* JAVASCRIPT *********-->

<script type="text/javascript" charset="utf8"
src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular/angular.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-messages/angular-messages.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/svg-assets-cache.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/ag-grid/dist/ag-grid.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/lodash/lodash.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-dropdown-multiselect/dist/angular-dropdownMultiselect.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/d3/d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/dist/angular-nvd3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.core.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.js"></script>
<script type="text/javascript" charset="utf8"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/bootbox.min.js"></script>
<link rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<script type="text/javascript" charset="utf8"
src="js/directives/templates.js"></script>

您缺少触发更改的功能，即

selectedTab 


 <md-tabs md-selected="selectedTab">
      <md-tab label="One">
         <p class="tab-content">Tab One content</p>
      </md-tab>
      <md-tab label="Two">
         <p class="tab-content">Tab Two content</p>
      </md-tab>
      <md-tab label="Three">
          <p class="tab-content">Tab Three content</p>
      </md-tab>
 </md-tabs>

来源于另一个问题：

好吧，经过更多的修补，我发现我遗漏了一些基本的东西。我在设置应用程序时定义了“ngMaterial”，但在设置控制器时没有添加$mdMedia作为依赖项。我一做到这一点，它就奏效了。谢谢大家的投入

谢谢你的提示-标签仍然没有出现。另外，您如何在HTML中调用该新方法？对于这次尝试，我在md tabs元素中添加了click=changeTab（），但我不确定这是否正确。这会不会让标签根本无法显示？可能是的重复。很高兴你找到了解决方案！

selectedTab 


 <md-tabs md-selected="selectedTab">
      <md-tab label="One">
         <p class="tab-content">Tab One content</p>
      </md-tab>
      <md-tab label="Two">
         <p class="tab-content">Tab Two content</p>
      </md-tab>
      <md-tab label="Three">
          <p class="tab-content">Tab Three content</p>
      </md-tab>
 </md-tabs>

    $scope.selectedTab = 0;

    $scope.changeTab = function() {
        if ($scope.selectedTab === 2) {
            $scope.selectedTab = 0;
        }
        else {
            $scope.selectedTab++;
        }

    }