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

2019年7月28日 168次阅读

我在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>

《angularjs – 使用UI-Router时Angular Material布局中断》

检查时,它显示添加了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>

《angularjs – 使用UI-Router时Angular Material布局中断》

检查时显示缺少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>保存这些得到布局=行.这个< div>的孩子是sidenav和main内容,因此他们获得属性flex.请注意,我没有在md-sidenav上指定flex; Angular Material为我负责.呼.那是相当多的.看看它,看看它是否有意义.我也很乐意帮助你在JSFiddle或Plnkr上解决这个问题.请告诉我！

点赞