All geek questions in one place

Angular Material Breakdown Using UI-Router

I am using Angular Material 1.1.0 with UI-Router 1.0.0-beta.1 in my Angular 1.5 project and the UI-Router seems to break flexbox functionality.

The index.html layout is stretched and fills the container when it does not contain a UI-Router interface element. When I add <div ui-view="container"></div>, the layout breaks.

Flex works 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>

enter image description here

When checking, it shows that the flex class has been 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>

But when I add the UI-Router, it displays two lines at the top of the page, and the elements do not bend vertically. Code in index.html:

<body ng-app="app" layout="column" ng-cloak>
  <div class="gradient flex">
    <div ui-view="container" flex></div>
  </div>
</body>

And in the container:

<div layout="row" flex>
  <div flex class="red">First item in row</div>
  <div flex class="blue">Second item in row</div>
</div>

enter image description here

When checking, it is found that the 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?

+4
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>, , , , <div>, nav-bar main . <div>, , layout=row. <div> sidenav , flex. , flex md-sidenav; Angular . . . , . JSFiddle Plnkr. !

+1

Source: https://habr.com/ru/post/1662887/

More articles:


All Articles