在 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(使用前将#替换为@)