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

2024-02-15

我在 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 和主要内容,所以他们得到属性flex。请注意,我没有指定flex on the md-sidenav; Angular Material 帮我解决了这个问题。呼。那是相当多的。看看它是否有意义。我也很乐意帮助您在 JSFiddle 或 Plnkr 上解决这个问题。请告诉我!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 UI-Router 时 Angular Material 布局会中断 的相关文章

随机推荐