我在 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 视图?