0
md-sidenavをカスタムディレクティブ/コンポーネントの中に置くと、レンダリングが正しく機能しないため、sidenavには完全な高さがありません。ディレクティブ/コンポーネント内のmd-sidenavが正しく表示されない
私が気づいた奇妙なことは、角型アプリケーションのngMaterial依存性を取り除くとうまくいきます。
ここでは例を参照してください:ここではhttp://codepen.io/captainyouz/pen/NRPpov
index.htmlを
<html>
<head>
<title>MD Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" />
</head>
<body ng-app="md-example">
<sidenav></sidenav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
</body>
</html>
app.js
angular.module('md-example', ['ngMaterial']);
angular.module('md-example').component('sidenav', {
template: `
<md-sidenav class="md-whiteframe-2dp" md-component-id="left-side-nav" md-is-locked-open="$mdMedia('gt-md')">
This is a sidenav
</md-sidenav>
`
});