如何使用Angular Material动态创建基于JSON的菜单栏？

Question

我正在尝试使用 Angular Material Menu Bar directive, but the result is not being as expected. The best solution I have so far is to create a directive and call it recursively, like shown here: 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>

我该怎么做才能解决这个问题？

补充一个信息：我已经尝试过using ng-include创建菜单栏的方法，但结果非常糟糕。

Answer 1

有时我们希望指定元素的右侧对齐，例如如果我们在工具栏右侧有一个菜单，我们希望右对齐我们的菜单内容。

我们可以通过在 x 轴和 y 轴上使用 md-position-mode 属性来指定原点。现在只有 x 轴有多个选项。您可以指定目标目标或目标右目标的默认模式来指定右对齐目标。有关更多示例，请参阅演示的位置部分。

  <md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="target-right target">

或

有时不可避免地需要对菜单的定位进行更深层次的控制，以确保完美对齐。 md-menu 提供 md-offset 属性以允许调整精确定位的像素级特性。

此偏移量以 x y 或 n 的格式提供，其中 n 将用于 x 轴和 y 轴。

例如，要将菜单从顶部移动 2px，我们可以使用：

       <md-menu ng-if="ctrl.isCompoundedMenuItem()" md-offset="120 0">

mdMenu API Documentation

Answer 2

我能够通过设置指令模板中问题 "manually" 中提到的属性和类来解决菜单行为问题，如下所示：

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

如何使用Angular Material动态创建基于JSON的菜单栏？

How to dynamically create a menu bar based on JSON using Angular Material?

json

angularjs

angular-material