Frederico Pantuzza de Meira Frederico Pantuzza de Meira - 4 months ago 61
AngularJS Question

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

I am trying to create a menu bar recursively using 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: Notice that there are two menu bars in this Plunker. The first is created with my recursive structure from a JSON and the second is written directly on the template. The problem with my solution happens when there are nested menus like "Lorem -> Dolor -> ...", as the nested menus are not being aligned correctly.

Inspecting the generated code on Chrome, I notice that the nested menu in the second menu bar (written directly on template) has some properties regarding its nest state:

<md-menu md-position-mode="cascade"
class="md-nested-menu md-menu ng-scope"

while the same menu in the first menu bar doesn't:

<md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope">

What can I do to fix this?

Just adding an information: I have already tried an approach using
to create the menu bar, but the result was terribly worse.


I was able to solve the problems with the menu behaviour by setting the attributes and classes mentioned in the question "manually" in the directive template, like this:

<md-menu ng-if="ctrl.isCompoundedMenuItem()"
         md-nest-level="{{ ::nestLevel }}">

Where nestLevel is in the isolated scope and is incremented on every new level:

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

Starting by 1, naturally:

<md-menu-bar ...>
      <my-menu-item ng-repeat="item in menu.items" menu="item" 

The updated plunker can be seen here: