md-tabs没有出现在页面上

问题描述 投票：1回答：2

我正在尝试设置一个带有两个选项卡（开始）的简单索引页面，每个选项卡只有一个占位符文本输入元素，但是当工具栏显示正确时，两个选项卡根本不显示（不仅仅是标签，标签本身不显示）。我之前在其他项目中使用过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>
html angularjs angularjs-material
2个回答
1
投票

好吧，经过多次修修补补，我发现这是我遗失的一些基本问题。我在设置应用程序时定义了'ngMaterial'，但在设置控制器时没有添加$ mdMedia作为依赖项。我一做到这一点就行了。感谢大家的意见和建议！

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.