md标签未显示在页面上

时间:2018-07-24 20:11:00

标签: html angularjs angularjs-material

我正在尝试建立一个简单的索引页,该页具有两个选项卡(以开始),每个选项卡仅包含一个占位符文本输入元素,但是当工具栏正确显示时,两个选项卡根本不显示(而不仅仅是标签的内容,则标签本身不会显示)。我以前在其他项目中使用过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>

2 个答案:

答案 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