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: https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA. 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"
md-nest-level="1">
...
</md-menu>
while the same menu in the first menu bar doesn't:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope">
...
</md-menu>
What can I do to fix this?
Just adding an information: I have already tried an approach using ng-include 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-position-mode="cascade"
class="md-nested-menu"
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>
</md-menu-content>
Starting by 1, naturally:
<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>
The updated plunker can be seen here: https://plnkr.co/edit/QBjeR2hZFKsJ88Hl4ptG.
Sometimes we want to specify alignment on the right side of an element, for example if we have a menu on the right side a toolbar, we want to right align our menu content.
We can specify the origin by using the md-position-mode attribute on both the x and y axis. Right now only the x-axis has more than one option. You may specify the default mode of target target or target-right target to specify a right-oriented alignment target. See the position section of the demos for more examples.
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="target-right target">
OR
It is sometimes unavoidable to need to have a deeper level of control for the positioning of a menu to ensure perfect alignment. md-menu provides the md-offset attribute to allow pixel level specificty of adjusting the exact positioning.
This offset is provided in the format of xy or n where n will be used in both the x and y axis.
For example, to move a menu by 2px from the top, we can use:
<md-menu ng-if="ctrl.isCompoundedMenuItem()" md-offset="120 0">
mdMenu API Documentation
链接地址: http://www.djcxy.com/p/92784.html上一篇: 跟随一个已经重命名的目录？