使用角度组件会破坏材质布局

2024-01-11

在 index.html 中包含以下内容和一个简单的 ui 路由器状态,该状态将组件加载为模板

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

使用存储在文件中的以下模板定义的组件

<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
<md-content class="green" flex>content</md-content>

生成的代码将是

 <body ng-app="myApp" layout="column">
       <div class="container" layout="row" flex ui-view>
          <customizing>
             <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
             <md-content class="green" flex>content</md-content>
          </customizing>
       </div>
    </body>

该标签打破了有角度的材料布局。如果我不使用组件,而只使用这样的视图,布局就可以了

<body ng-app="myApp" layout="column">
       <div class="container" layout="row" flex ui-view>
          <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
          <md-content class="green" flex>content</md-content>
       </div>
    </body>

有任何想法吗? 我还发现了这个post https://groups.google.com/forum/embed/#!topic/angular/_EcFXHkIm_c,但我不知道如何使用该组件作为属性。是否可以?

See 样本 http://plnkr.co/edit/2jXPKKLyOchRIakzTLuf?p=preview


这在以下情况下工作正常Plunker http://plnkr.co/edit/BZojmlGF06mNpEKA03nQ?p=preview

索引.html

<div class="container" flex ui-view>
    <customizing layout="row" layout-fill></customizing>
</div>

如果您想知道layout-fill,这是来自在线文档 https://material.angularjs.org/latest/layout/options:

layout-fill强制布局元素填充其父容器

Edit:

对于下面评论中的 Plunker 试试这个Plunker http://plnkr.co/edit/g8nEOcZ3KzAoFwvUi9fk?p=preview

定制.html

<div layout="row" layout-fill>
    <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
    <md-content class="green" flex>content</md-content>
</div>

索引.html

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

使用角度组件会破坏材质布局 的相关文章

随机推荐