使用UI-Router时，Angular Material布局中断 [英] Angular Material layout breaks when using UI-Router
问题描述
我在Angular 1.5项目中将Angular Material 1.1.0和UI-Router 1.0.0-beta.1一起使用，UI-Router似乎破坏了flexbox的功能.
I´m using Angular Material 1.1.0 with UI-Router 1.0.0-beta.1 in my Angular 1.5 project and UI-Router seems to break flexbox functionality.
当index.html布局不包含UI-Router元素时，它将拉伸并填充该容器.当我添加<div ui-view="container"></div>时，布局中断.
The index.html layout stretches and fills the container when it doesn't contain UI-Router element. When I add <div ui-view="container"></div> the layout breaks.
当我有以下情况时，Flex正在工作:
Flex is working when I have:
<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类:
When inspected it displays that flex class is added:
<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中的代码:
But when I add UI-Router, it displays two rows at the top of the page and elements aren't flexing vertically. The code in 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类丢失:
When inspected it reveals flex class is missing:
<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视图?
I'm aware that layout only affects the flow direction for that container's immediate children and UI-Router is adding <stream class="ng-scope ng-isolate-scope">. How I´m able to add the flex class to UI-Router views?
推荐答案
在不打扰兔子洞的情况下，我基本上使用以下约定解决了我的问题:
Without getting too far down the rabbit hole, I essentially fixed my issue using this convention:
<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属性.现在，我已经在顶部有了工具栏，并且将
So what's going on here? I want my toolbar (at the top) to be in-column with my sid-nav and main content. Since I'm treating <body> as my parent element, I give it the attribute of layout=column. Now that I have the toolbar on top and the <div> that holds both the side-nav and main content stacked underneath in a 'column,' I want to make this <div>a row so I can stack nav-bar and main content side-by-side. The parent <div> that holds these gets layout=row. The children of this <div> are the sidenav and main content, so they get the attribute flex. Notice that I didn't specify flex on the md-sidenav; Angular Material takes care of that for me. Whew. That was quite a bit. Look at that and see if it makes sense. I would also be delighted to help you figure this out on a JSFiddle or Plnkr. Just let me know!
这篇关于使用UI-Router时，Angular Material布局中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
