我正在尝试建立一个简单的索引页，该页具有两个选项卡（以开始），每个选项卡仅包含一个占位符文本输入元素，但是当工具栏正确显示时，两个选项卡根本不显示（而不仅仅是标签的内容，则标签本身不会显示）。我以前在其他项目中使用过md-tabs，所以我怀疑我的设置有误，但是我不确定是什么。在开发人员模式下，我可以看到选项卡的引用，但是当我选择它们时，它们永远不会在页面上被调出。确实会被调用，但是各个选项卡都没有。确实会调用控制器“ 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>
这是来自mainApp.js内部的调用：
(function(){
//agGrid.LicenseManager.setLicenseKey("your license key goes here");
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('tinkerApp', [ 'ngRoute','agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-
multiselect','ngSanitize','nvd3','hljs']);
})();
(function(){
angular.module('tinkerApp', [ 'ngRoute', 'agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-multiselect','ngSanitize','nvd3','hljs']);
"use strict";
var app = angular.module('tinkerApp');
app.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
}).otherwise('/');
});
})();
这是我在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>
答案 0 :(得分：1)
好吧，经过反复修改后，我发现这是我所缺少的一些基本内容。设置应用程序时，我已定义“ ngMaterial”，但设置控制器时，未添加$ mdMedia作为依赖项。我一这样做，它就起作用了。谢谢大家的投入！
答案 1 :(得分：0)
您缺少触发更改的功能，即
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++;
}
}
另一个问题的出处：See the answer