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

发布时间：2020-12-17 10:19:04 所属栏目：安全来源：网络整理

导读：在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="

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!