在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>
这在
Plunker中可以正常工作
的index.html
<div class="container" flex ui-view> <customizing layout="row" layout-fill></customizing> </div>
如果你想知道布局填充,这是从online docs:
layout-fill
forces the layout element to fill its parent container
编辑:
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>
的index.html
<div class="container" flex ui-view> <customizing></customizing> </div>