CODEWITHSUNDEEP
htmlangularjsangularjs-material
monkeyWithAMachinegun
monkeyWithAMachinegun

Reputation: 331

md-tabs not appearing on page

I'm trying to set up a simple index page with two tabs (to start), each with just a placeholder text input element, but while the toolbar displays properly the two tabs don't show at all (not just the content of the tabs, the tabs themselves don't display). I've used md-tabs before in other projects so I suspect I have something set up wrong but I'm not sure what. In developer mode, I can see the reference for the tabs, but when I select them they never get called out on the page. the around the does get called out, but none of the individual tabs do. The 'ng-init' call in the controller 'mainController' does get called, so the content of the tabs got processed, but the tabs never display. Any help would be appreciated, this is my first time trying to set this up on my own.

Here is the HTML for the index page:

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

Here are the calls from inside 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('/');
    });
})();

And here are the css and script data I call inside index.html

<!--********* 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>

Upvotes: 1

Views: 1148

Answers (2)

monkeyWithAMachinegun
monkeyWithAMachinegun

Reputation: 331

Okay after more tinkering I discovered it was some basic thing I was missing. I'd defined 'ngMaterial' when I set up the app, but hadn't added $mdMedia as a dependency when I set up the controller. As soon as I did that, it worked. Thanks for the input everyone!

Upvotes: 1

Rodolfo R
Rodolfo R

Reputation: 447

Your missing a function to trigger the change i.e

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>

Define the function in the controller 

    $scope.selectedTab = 0;

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

    }

Source from another question: See the answer

Upvotes: 0

Related Questions