Angular Toggle Menu

by kshep92

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
    //Code copied from: https://github.com/angular-ui/bootstrap/blob/master/src/dropdownToggle/dropdownToggle.js
    var app = angular.module("menuModule", []);
    app.directive("dropdownToggle", function($document) {
        var openElement = null,
    closeMenu = angular.noop;
        return {
            restrict: "CA",
            link: function(scope, elm, attrs) {
                elm.parent().on("click", function() { closeMenu(); });
                elm.on("click", function(e) {
                    var elementWasOpen = (elm == openElement);
                    e.preventDefault();
                    e.stopPropagation();
                    if(openElement) {
                        closeMenu();
                    }
                    if(!elementWasOpen) {
                        elm.parent().addClass("open");
                        openElement = elm;
                        closeMenu = function(e) {
                            if(e) {
                                e.preventDefault();
                                e.stopPropagation();
                            }
                            $document.unbind("click", closeMenu);
                            elm.parent().removeClass("open");
                            closeMenu = angular.noop;
                            openElement = null;
                        };
                        $document.on("click", closeMenu);
                    }
                });
            }
        }
    });    
</script>

<div ng-app="menuModule">
    <ul>
        <li class="dropdown">
            <a class="dropdown-toggle">Accounts</a>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="javascript: console.log('WASA')">WASA Accounts</a></li>
                <li><a href="#">TTEC Accounts</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a class="dropdown-toggle">Profile</a>
   ...

CSS

ul.dropdown-menu {
    display: none;
}

li.open ul {
    display: block;
}

a.dropdown-toggle {
    display: inline-block;
    font-family: sans-serif;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

a.dropdown-toggle:hover {
    text-decoration: underline;
    background-color: #f5f5f5;
}