gmo*_*gan 8 angularjs angular-material
在index.html中具有以下内容以及将组件作为模板加载的简单ui路由器状态
<body ng-app="myApp" layout="column">
<div class="container" layout="row" flex ui-view>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
使用存储在文件中的以下模板定义组件
<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
<md-content class="green" flex>content</md-content>
Run Code Online (Sandbox Code Playgroud)
生成的代码将是
<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>
Run Code Online (Sandbox Code Playgroud)
标签打破了角度材料布局.如果我不使用组件,只是这样的视图,布局就可以了
<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>
Run Code Online (Sandbox Code Playgroud)
有任何想法吗?我也找到了这篇文章,但我无法弄清楚如何使用该组件作为属性.可能吗?
请参阅plnkr示例
这在Plunker中运行正常
的index.html
<div class="container" flex ui-view>
<customizing layout="row" layout-fill></customizing>
</div>
Run Code Online (Sandbox Code Playgroud)
如果你想知道layout-fill,这是来自在线文档:
layout-fill强制layout元素填充其父容器
编辑:
对于下面评论中的Plunker,请尝试使用此Plunker
customizing.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>
Run Code Online (Sandbox Code Playgroud)
的index.html
<div class="container" flex ui-view>
<customizing></customizing>
</div>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1803 次 |
| 最近记录: |