本文介绍了使用UI-Router时,Angular Material布局中断的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在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属性.现在,我已经在顶部有了工具栏,并且将和主要内容都保存在<div>下方的<div>中,我想将此<div>排成一行,以便可以将nav-bar和内容并排.持有这些的父级<div>获取layout=row.此<div>的子级是sidenav和主要内容,因此它们获得属性flex.注意,我没有在md-sidenav上指定flex. Angular Material为我解决了这一问题. ew.那是相当多的.看一下,看看是否有意义.我也很高兴帮助您在JSFiddle或Plnkr上解决这个问题.请让我知道!

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布局中断的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 01:08