gpt4 book ai didi

angularjs - 使用 Angular 组件会破坏 Material 布局

转载 作者:行者123 更新时间:2023-12-02 22:34:36 25 4
gpt4 key购买 nike

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

该标签打破了有 Angular 的 Material 布局。如果我不使用组件,而只使用这样的 View ,布局就可以了

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

如果您想了解layout-fill,这来自 online docs :

layout-fill forces the layout element to fill its parent container

编辑:

对于下面评论中的 Plunker,请尝试此 Plunker

定制.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>

关于angularjs - 使用 Angular 组件会破坏 Material 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37735437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com