menu.js

(function() {
    var menuLevel = 0;
    var module = angular.module("merp.base.menu", ['ui.bootstrap']);
    module.directive('menubar', ['$location', function($location) {
        return {
            restrict: 'E',
            scope: {},
            transclude: true,
            replace: false,
            template: '<div class="navbar"><div class="navbar-inner" ng-transclude></div></div>',
            compile: function (tElement, tAttrs, transclude) {
                menuLevel = 0;
                return function(scope) {
                    scope.name = "menubar";
                };
            }
        };
    }]);
    module.directive('menu', ['$compile', function($compile) {
        return {
            restrict: 'E',
            scope: true,
            compile: function(tElement, tAttrs) {
                var linker;
                menuLevel++;
                if (tElement.parent()[0].nodeName.toUpperCase() == "MENUBAR") {
                    linker = $compile('<ul class="nav">' + tElement.html() + '</ul>')
                } else {
                    linker = $compile('<ul class="dropdown-menu">' + tElement.html() + '</ul>')
                }
                tElement.html('');
                menuLevel--;
                return function(scope, iElement, iAttrs) {
                    iElement.replaceWith(linker(scope));
                };
            }
        };
    }]);
    module.directive('menuitem', ['$compile', function($compile) {
        return {
            restrict: 'E',
            scope: true,
            compile: function(tElement, tAttrs) {
                var linker;
                var hasSubMenu = false;
                var isSubMenu = (menuLevel >= 2);
                var children = tElement.children();
                for (var i = 0; i < children.length; i++) {
                    if (children[i].nodeName.toUpperCase() == "MENU") {
                        hasSubMenu = true;
                        break;
                    }
                }
                var title = '';
                if (tAttrs.title) {
                    if (hasSubMenu && !isSubMenu) {
                        title = '<a class="dropdown-toggle" href="#' + (tAttrs.href?tAttrs.href:'') + '">' + tAttrs.title + '<span class="caret"></span>' + '</a>';
                    } else {
                        title = '<a href="#' + (tAttrs.href?tAttrs.href:'') + '">' + tAttrs.title + '</a>';
                    }
                }
                linker = $compile('<li class="{{ cssClass }}">' + title + tElement.html() + '</li>');
                tElement.html('');
                return function(scope, iElement, iAttrs) {
                    var itemElement = linker(scope);
                    iElement.replaceWith(itemElement);
                    scope.cssClass = (iAttrs.class?iAttrs.class:'') + ' ' + (hasSubMenu?(isSubMenu?'dropdown-submenu':'dropdown'):'');
                    scope.$on('activate', function(event, args) {
                        console.log('activate', args);
                        if (args == {}) {
                            itemElement.addClass('active');
                        } else if (args.path == iAttrs.href) {
                            itemElement.addClass('active');
                            //scope.$emit('activate', {});
                        }
                    });
                    scope.$on('deactivate', function(event, args) {
                        console.log('deactivate', args);
                        if (args == {}) {
                            itemElement.removeClass('active');
                        } else if (args.path == iAttrs.href) {
                            itemElement.removeClass('active');
                            //scope.$emit('deactivate', {});
                        }
                    });
                };
            }
        };
    }]);
})();