CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
mz1378
mz1378

Reputation: 2612

jQuery Smart Menus not working in Angularjs

I've put this code in Html head section:

<script src="lib/smart-menus/jquery.smartmenus.min.js"></script>
<script type="text/javascript">
        $(function() {
            $('#main-menu').smartmenus({
                subMenusSubOffsetX: 1,
                subMenusSubOffsetY: -8
            });
        });
</script>
<link href="lib/smart-menus/sm-core-css.css" rel="stylesheet" />
<link href="lib/smart-menus/sm-blue.css" rel="stylesheet" />

and in body:

<nav id="main-nav" role="navigation">
        <div id="main-menu" class="sm sm-rtl sm-blue">
            <ul>
                <li><a ui-sref="site.home">Home</a></li>
                <li ng-repeat="menu in menus">
                    <a href='#'>{{menu.Title}}</a>
                    <ul ng-show="getHasSubMenus(menu)">
                        <li ng-repeat="subMenu in menu.SubMenus">
                            <a ui-sref="site.shopbycategory({ departmentID: subMenu.DepartmentID , categoryID: subMenu.CategoryID, searchTerm: '' })">
                                {{subMenu.Title}}
                            </a>
                        </li>

                    </ul>
                </li>
                <li><a ui-sref="site.contact">Contacts</a></li>
            </ul>
        </div>
    </nav>

in the page controller I have:

 function siteController($scope, $location, $rootScope, Account, $state, $stateParams, Site, $timeout) {

    $timeout(function () {            
        $scope.getMenus(function () { // OnSuccess                 
            $('#main-menu').smartmenus('refresh');                
        });
    }, 1);}

Also I included jQuery 1.12 before other scripts. and I can verify that angularjs has added all the menus to the main-menu div using F12 in IE, But nothing appears in the page and I don't get any errors from these codes. Is my code correct?

Upvotes: 1

Views: 1061

Answers (1)

mz1378
mz1378

Reputation: 2612

I changed:

<div id="main-menu" class="sm sm-rtl sm-blue">
        <ul>

to:

<ul id="main-menu" class="sm sm-rtl sm-blue">

now top level links work and submenus despite existence not showing.

Upvotes: 1

Related Questions