使用角度分量打破材质布局

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示例

cam*_*kid 5

这在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)