SmartMenus with AngularJS

Home Forums Older releases 0.9.x SmartMenus with AngularJS

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1339
    peterkickit
    Participant

    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?

    #1632
    admin
    Keymaster

    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!

    #2436
    tianyu
    Participant

    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)”?

    #2440
    admin
    Keymaster

    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');
    #2441
    tianyu
    Participant

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

    #2442
    tianyu
    Participant

    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.

    #2443
    tianyu
    Participant

    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.

    #2453
    admin
    Keymaster

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?