Question

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

Answer 1

在没有走得太远的情况下，我基本上使用这个惯例解决了我的问题：

<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>同时保存了侧面导航和主要内容，并且位于＆＃39;列中。我想把这个<div>连接起来，这样我就可以并排堆叠导航栏和主要内容。保存这些内容的父<div>获得layout=row。此<div>的子项是sidenav和main内容，因此它们获取属性flex。请注意，我没有在flex上指定md-sidenav; Angular Material为我负责。呼。那是相当多的。看看它，看看它是否有意义。我也很乐意帮助你在JSFiddle或Plnkr上解决这个问题。请告诉我！

使用UI-Router时，Angular Material布局中断

1 个答案: