J'utilise Angular Material 1.1.0 avec UI-Router 1.0.0-beta.1 dans mon projet Angular 1.5 et UI-Router semble casser la fonctionnalité flexbox.
La présentation index.html s'étire et remplit le conteneur lorsqu'elle ne contient pas d'élément UI-Router. Lorsque j'ajoute <div ui-view="container"></div>
la mise en page est interrompue.
Flex fonctionne quand je l'ai fait :
<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>
Lorsqu'il est inspecté, il affiche que la classe flex est ajoutée :
<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>
Mais lorsque j'ajoute UI-Router, il affiche deux lignes en haut de la page et les éléments ne sont pas flexibles verticalement. Le code dans index.html :
<body ng-app="app" layout="column" ng-cloak>
<div class="gradient flex">
<div ui-view="container" flex></div>
</div>
</body>
Et dans le conteneur :
<div layout="row" flex>
<div flex class="red">First item in row</div>
<div flex class="blue">Second item in row</div>
</div>
Lorsqu'on l'inspecte, on s'aperçoit qu'il manque la classe 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>
Je suis conscient que la disposition n'affecte que la direction du flux pour les enfants immédiats de ce conteneur et que UI-Router ajoute <stream class="ng-scope ng-isolate-scope">
. Comment puis-je ajouter la classe flex aux vues UI-Router ?