SmartMenus with AngularJS

[peterkickit]

I have a UL element that is initially empty, but controlled by an AngularJS controller:

<DIV id="mainnav"><ul id="main-menu" class="sm sm-blue" ng-bind-html-unsafe="myHTML"></ul></DIV>

AngularJS fills in legitimate HTML, and the menu shows up just fine. But none of the 2nd level items drop down. I’m sure there is some initialization I need to do after Angular is done populating the element, I just can’t see what that would be or where I would do that. Any suggestions?

[admin]

The initialization code is basically the following:

$('#main-menu').smartmenus({
	subMenusSubOffsetX: 1,
	subMenusSubOffsetY: -8
});

So in your case you would need to call this as soon as the menu element is populated by the AngularJS code.

In case you need to call this before the HTML is inserted (for any reason), you can then call the refresh API method after it is populated to refresh your menu tree:

$('#main-menu').smartmenus('refresh');

You can find a short code sample in the docs:

http://www.smartmenus.org/docs/#refreshInstance

Cheers!

[tianyu]

I have a similar question:

After I change the drop-down menu with AngularJS, how can I do “refresh” if I use “SmartMenus Bootstrap Addon (Navbar fixed top)”?

[admin]

It’s practically the same with the Bootstrap add-on. Just set some id to your .navbar-nav UL element (e.g. “main-menu”) and call the method like this:

$('#main-menu').smartmenus('refresh');

[tianyu]

Thank you for your prompt reply.
I tried above “refresh”, but the second level menu never show up.
By the way, the first level menu can show up even without calling the “refresh”.

[tianyu]

Sorry, the “first level” means “second level” and “second level” means “third level”. My AngularJS code tries to change one of the first level (top level) menu.

[tianyu]

I did some more tests. Below are my findings:

1) If a level N menu item is added by AngularJS, then its sub-level (level N+1) menu will not show up. (N = 1, 2, ..).

2) It seems that even the initialization function “$(‘#main-menu’).smartmenus(); ” (not refresh) cannot handle the menu item added by AngularJS if the item contains sub-menu.

3) The pure SmartMenus (without Bootstrap) has the same problem.

[admin]

Please post an URL to some sort of live demo. It’s very difficult to guess what exactly might be causing the issues without being able to test your code.

[Author]

Posts