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

在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,但我无法弄清楚如何使用该组件作为属性.可能吗？

见plnkr sample

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

编辑：

对于下面评论中的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>

的index.html

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

原文链接：https://www.f2er.com/angularjs/240502.html

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

猜你在找的Angularjs相关文章