使用UI-Router时角度材料布局中断
bod*_*tva 5 angularjs angular-ui-router angular-material
我在Angular 1.5项目中将Angular Material 1.1.0和UI-Router 1.0.0-beta.1一起使用，UI-Router似乎破坏了flexbox的功能。
当index.html布局不包含UI-Router元素时，它将拉伸并填充该容器。当我添加<div ui-view="container"></div>布局中断时。
当我有以下情况时，Flex正在工作：
<body ng-app="app" layout="column" ng-cloak>
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
</body>
在检查时，它显示添加了flex类：
<div layout="row" flex= class="layout-row flex">
<div flex class="red flex">First item in row</div>
<div flex class="blue flex">Second item in row</div>
</div>
但是，当我添加UI-Router时，它会在页面顶部显示两行，并且元素不会垂直弯曲。index.html中的代码：
<body ng-app="app" layout="column" ng-cloak>
<div class="gradient flex">
<div ui-view="container" flex></div>
</div>
</body>
并在容器中：
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
检查时发现flex类丢失：
<div class="gradient flex">
<!-- uiView: container -->
<div ui-view="container" flex class="ng-scope flex">
<stream class="ng-scope ng-isolate-scope">
<div layout="row">
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
</stream>
</div>
</div>
我知道布局只会影响该容器的直接子级的流向，并且UI-Router正在添加<stream class="ng-scope ng-isolate-scope">。如何将flex类添加到UI-Router视图？
在没有深入兔子洞的情况下，我基本上使用以下约定解决了我的问题：
<body ng-app="app" layout="column">
<!-- Top tool bar (top of screen) -->
<md-toolbar></md-toolbar>
<!-- This div holds both my sidenav and main content -->
<div flex layout="row">
<!-- This is my sidenav -->
<md-sidenav>...</md-sidenav>
<!-- This is my main content, fit into an ng-view element -->
<div flex ng-view></div>
</div>
那么这是怎么回事呢？我希望我的工具栏（位于顶部）与我的 sid-nav 和主要内容位于同一列中。由于我将其视为<body>我的父元素，因此我为其赋予 属性layout=column。现在我的工具栏位于顶部，并且<div>将侧面导航栏和主要内容堆叠在“列”下方，我想将其排成<div>一行，这样我就可以并排堆叠导航栏和主要内容。<div>持有这些的父母得到layout=row。它的子项<div>是 sidenav 和 main content，因此它们获得属性flex。请注意，我没有flex在md-sidenav;上指定。Angular Material 帮我解决了这个问题。呼。那是相当多的。看看它是否有意义。我也很乐意帮助您在 JSFiddle 或 Plnkr 上解决这个问题。请告诉我！