md-sidenav внутри директивы/компонентов отображается неправильно

При установке 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> 
    ` 
});

источник

2016-09-05 A.I.S

Здесь вы идете - CodePen

Markup

<body ng-app="md-example"> 
    <div layout="column" layout-fill> 
     <sidenav flex layout="row"></sidenav> 
    </div>

Это следует за examples in the docs.

источник

2016-09-05 09:47:41

md-sidenav внутри директивы/компонентов отображается неправильно

ответ

Смежные вопросы