如何使用Angular Material动态创建基于JSON的菜单栏?
我正在尝试使用Angular Material Menu Bar指令递归地创建菜单栏,但结果不符合预期。 到目前为止,我最好的解决方案是创建一个指令并递归调用它,如下所示:https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA。 请注意,此Plunker中有两个菜单栏。 第一个是使用JSON的递归结构创建的,第二个直接写在模板上。 我的解决方案的问题发生在嵌套菜单如“Lorem - > Dolor - > ...”时,因为嵌套菜单未正确对齐。
检查在Chrome上生成的代码,我注意到第二个菜单栏(直接写在模板上)中的嵌套菜单有一些关于它的嵌套状态的属性:
<md-menu md-position-mode="cascade"
class="md-nested-menu md-menu ng-scope"
md-nest-level="1">
...
</md-menu>
而第一个菜单栏中的相同菜单则不会:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope">
...
</md-menu>
我能做些什么来解决这个问题?
只需添加一个信息:我已经尝试了使用ng-include
创建菜单栏的方法,但结果非常糟糕。
我可以通过在指令模板中设置问题“手动”中提到的属性和类来解决菜单行为的问题,如下所示:
<md-menu ng-if="ctrl.isCompoundedMenuItem()"
md-position-mode="cascade"
class="md-nested-menu"
md-nest-level="{{ ::nestLevel }}">
其中nestLevel
位于隔离范围内,并在每个新级别上递增:
<md-menu-content class="md-menu-bar-menu md-dense">
<my-menu-item ng-repeat="item in menu.items" menu="item"
nest-level="{{ ::(nestLevel + 1) }}"></my-menu-item>
</md-menu-content>
自然,从1开始:
<md-menu-bar ...>
...
<md-menu-content>
<my-menu-item ng-repeat="item in menu.items" menu="item"
nest-level="1"></my-menu-item>
</md-menu-content>
</md-menu-bar>
更新后的plunker可以在这里看到:https://plnkr.co/edit/QBjeR2hZFKsJ88Hl4ptG。
有时我们想要在元素的右侧指定对齐方式,例如,如果我们在右侧有一个菜单工具栏,我们想要对齐菜单内容。
我们可以通过在x轴和y轴上使用md-position-mode属性来指定原点。 现在只有x轴有多个选项。 您可以指定目标目标或目标右侧目标的默认模式,以指定一个右向导向的目标。 有关更多示例,请参阅演示的位置部分。
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="target-right target">
要么
有时为了确保完美的对齐,需要对菜单的位置进行更深层次的控制,这是不可避免的。 md-menu提供了md-offset属性以允许调整精确定位的像素级特定性。
此偏移量以xy或n的格式提供,其中n将在x轴和y轴中使用。
例如,要从顶部将菜单移动2px,我们可以使用:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-offset="120 0">
mdMenu API文档
链接地址: http://www.djcxy.com/p/92783.html上一篇: How to dynamically create a menu bar based on JSON using Angular Material?
下一篇: Can anyone tell me why this C# email validation regular expression (regex) hangs?