0
角度材質ディレクティブ "md-nav-bar"に問題があります。私のコードではレンダリングされません。私はさまざまなコードをコピーしようとしましたが、それを動かすことはできませんでした。md-nav-barはレンダリングされず、プレーンテキストのみを表示します
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:[email protected]">
<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
はどうもありがとうございました！それは今働いています:) –