Question

我对Angular Material指令＆＃34; md-nav-bar＆＃34;有疑问。它没有在我的代码中呈现。我尝试复制各种工作代码，但我没有设法让它运行。

HTML

<body ng-app="app" ng-controller="MainController">

<md-content layout="row">
    <md-toolbar class="md-hue-2">
        <div class="md-toolbar-tools">
            <md-button class="md-icon-button" aria-label="Home" href="#/welcome">
                <i class="material-icons">explore</i>
            </md-button>
            <h2 href="#/welcome">
                md-nav-bar Test
            </h2>
            <span flex></span>
            <md-button class="md-icon-button" aria-label="Coontact Us" href="mailto:info@osterdach.de">
                <i class="material-icons">email</i>
            </md-button>
            <md-button class="md-icon-button" aria-label="Call Us" href="tel:+4915732224836">
                <i class="material-icons">phone</i>
            </md-button>
        </div>
    </md-toolbar>
</md-content>

<md-content>
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
        <md-nav-item md-nav-href="#/holzbau" name="page5">Holzbau</md-nav-item>
        <md-nav-item md-nav-href="#/dach" name="page5">Dach</md-nav-item>
      <md-nav-item md-nav-href="#/fassade" name="page5">Fassade</md-nav-item>
      <md-nav-item md-nav-href="#/erhaltUndEnergie" name="page5">Erhalt und Energie</md-nav-item>
    </md-nav-bar>
</md-content>

<md-content>
  <p><strong>The Routing is working properly, so I am not including it completely here!</strong></p>
    <a href="#/holzbau">Holzbau</a> |
    <a href="#/dach">Dach</a> |
    <a href="#/fassade">Fassade</a> |
    <a href="#/erhaltUndEnergie">Erhalt und Energie</a>
</md-content>

<hr>

<md-content ng-view layout="row" layout-align="center"></md-content>
</body>

app.js

var app = angular.module("app", ["ngRoute", "ngMaterial"]);

/* ROUTING & THEMING */
app.config(function ($mdThemingProvider, $routeProvider) {

    /* ROUTING */
    $routeProvider
        .when("/holzbau", {
            templateUrl : "views/holzbau.html"
        })
        .when("/dach", {
            templateUrl : "views/dach.html"
        })
        .when("/fassade", {
            templateUrl : "views/fassade.html"
        })
        .when("/erhaltUndEnergie", {
            templateUrl : "views/erhaltUndEnergie.html"
        })
        .when("/welcome", {
            templateUrl : "views/welcome.html"
        })
        .otherwise({
            templateUrl : "views/welcome.html"
        });
    /* END ROUTING */

    /* THEMING */
    var customPrimary = {
        '50': '#3defff',
        '100': '#24ecff',
        '200': '#0aeaff',
        '300': '#00dcf0',
        '400': '#00c4d6',
        '500': '#00ADBD',
        '600': '#0096a3',
        '700': '#007e8a',
        '800': '#006770',
        '900': '#005057',
        'A100': '#57f1ff',
        'A200': '#70f3ff',
        'A400': '#8af5ff',
        'A700': '#00383d'
    };
    $mdThemingProvider
        .definePalette('customPrimary',
            customPrimary);

    var customAccent = {
        '50': '#68070b',
        '100': '#80090d',
        '200': '#970b10',
        '300': '#af0c12',
        '400': '#c70e15',
        '500': '#df1017',
        '600': '#f13138',
        '700': '#f2494f',
        '800': '#f46166',
        '900': '#f6787d',
        'A100': '#f13138',
        'A200': '#EF1921',
        'A400': '#df1017',
        'A700': '#f79094'
    };
    $mdThemingProvider
        .definePalette('customAccent',
            customAccent);

    var customWarn = {
        '50': '#949eb6',
        '100': '#8590ab',
        '200': '#7582a1',
        '300': '#677496',
        '400': '#5c6987',
        '500': '#525D78',
        '600': '#485169',
        '700': '#3d465a',
        '800': '#333a4b',
        '900': '#292e3b',
        'A100': '#a3abc0',
        'A200': '#b2b9ca',
        'A400': '#c1c7d5',
        'A700': '#1e222c'
    };
    $mdThemingProvider
        .definePalette('customWarn',
            customWarn);

    var customBackground = {
        '50': '#ffffff',
        '100': '#ffffff',
        '200': '#ffffff',
        '300': '#f4fbfb',
        '400': '#e1f5f4',
        '500': '#CEEEED',
        '600': '#bbe7e6',
        '700': '#a8e1df',
        '800': '#95dad8',
        '900': '#82d4d1',
        'A100': '#ffffff',
        'A200': '#ffffff',
        'A400': '#ffffff',
        'A700': '#6fcdca'
    };
    $mdThemingProvider
        .definePalette('customBackground',
            customBackground);

    $mdThemingProvider.theme('default')
        .primaryPalette('customPrimary')
        .accentPalette('customAccent')
        .warnPalette('customWarn')
        .backgroundPalette('customBackground')
    /* END THEMING */

});
/* END app.config */

app.controller("MainController", function($scope, $route) {

});

请使用我的代码：http://codepen.io/anon/pen/pbBOdv

查看此笔

Answer 1

您需要加载Angular Material CSS文件并更新JS文件 - CodePen

CSS：https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.css

JS：http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js

您还需要使每个name的{{1}}唯一：

md-nav-item

md-nav-bar无法渲染，只显示纯文本

1 个答案: