lossendae · July 4, 2019 20:22 · benjiwheeler · Apr 30, 2015
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html ng-app>
  <head>
    <title>Example</title>

  </head>
  <body>
    <nav class="main-nav" data-main-menu data-root="index"></nav>

    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="ui.router.js"></script>
  </body>
 </html>
diff --git a/mainMenu.js b/mainMenu.js
 'use strict';

 define(['app'], function (app) {

    var mainMenu = function($state, $stateParams, commons) {
        return {
            restrict: 'A',
            templateUrl: commons.path('views') + 'common/menu.html',
            transclude: true,
            compile: function(tElement, tAttrs) {

                var root = tAttrs.root;

                return function($scope, $elem, $attr) {
                    $scope.show = function(state){
                        if(!angular.isDefined(state.menu)){
                            return false;
                        }
                        if(!angular.isDefined(state.menu.icon)){
                            state.menu.icon = 'fa-link';
                        }
                        if(!angular.isDefined(state.menu.target)){
                            state.menu.target = state.name;
                        }
                        if(angular.isDefined(root)){
                            state.current = state.name == root ? $state.is(root) : $state.includes(state.name);
                        } else {
                            state.current = $state.is(state.name);
                        }
                        return true;
                    };
                }
            }
        };
    };

    app.register.directive('mainMenu', ['$state', '$stateParams', 'commons', mainMenu]);
 });
diff --git a/menu.html b/menu.html
 <ul>
    <li data-ng-repeat="state in $state.get() | filter:show" data-ui-sref-active="current">
        <a ui-sref="{{ state.menu.target }}"><i class="fa {{ state.menu.icon }}"></i>{{ state.menu.title }}</a>
    </li>
 </ul>
diff --git a/state.js b/state.js
 /* In my main config module */

 // Shown in menu
 $stateProvider
    .state('index', {
        url: "/",
        menu : {
            title : 'Dashboard',
            icon : 'fa-home'
        }
    });

 /* In another config module */

 $stateProvider
    // Not shown in menu
    .state('index.item', {
        url: "/item"
    })
    // Show in menu
    .state('index.item.child', {
        url: "/child1",
        abstract: true
        menu : {
            title : 'A menu item',
            state : 'index.item.child.grandchild' // Point to children
        }
    })
    // Not shown in menu but a menu item point to it
    .state('index.item.child.grandchild', {
        url: ""
    })
    // Not shown in menu
    .state('index.item.child.grandchild2', {
        url: "/child2"
    });
	<!DOCTYPE html>
	<html ng-app>
	<head>
	<title>Example</title>

	</head>
	<body>
	<nav class="main-nav" data-main-menu data-root="index"></nav>

	<script type="text/javascript" src="angular.js"></script>
	<script type="text/javascript" src="ui.router.js"></script>
	</body>
	</html>
	'use strict';

	define(['app'], function (app) {

	var mainMenu = function($state, $stateParams, commons) {
	return {
	restrict: 'A',
	templateUrl: commons.path('views') + 'common/menu.html',
	transclude: true,
	compile: function(tElement, tAttrs) {

	var root = tAttrs.root;

	return function($scope, $elem, $attr) {
	$scope.show = function(state){
	if(!angular.isDefined(state.menu)){
	return false;
	}
	if(!angular.isDefined(state.menu.icon)){
	state.menu.icon = 'fa-link';
	}
	if(!angular.isDefined(state.menu.target)){
	state.menu.target = state.name;
	}
	if(angular.isDefined(root)){
	state.current = state.name == root ? $state.is(root) : $state.includes(state.name);
	} else {
	state.current = $state.is(state.name);
	}
	return true;
	};
	}
	}
	};
	};

	app.register.directive('mainMenu', ['$state', '$stateParams', 'commons', mainMenu]);
	});
	/* In my main config module */

	// Shown in menu
	$stateProvider
	.state('index', {
	url: "/",
	menu : {
	title : 'Dashboard',
	icon : 'fa-home'
	}
	});

	/* In another config module */

	$stateProvider
	// Not shown in menu
	.state('index.item', {
	url: "/item"
	})
	// Show in menu
	.state('index.item.child', {
	url: "/child1",
	abstract: true
	menu : {
	title : 'A menu item',
	state : 'index.item.child.grandchild' // Point to children
	}
	})
	// Not shown in menu but a menu item point to it
	.state('index.item.child.grandchild', {
	url: ""
	})
	// Not shown in menu
	.state('index.item.child.grandchild2', {
	url: "/child2"
	});