How to hide submenu on click outside of navigation bar

Question

I want to write one directive to genrerate navigation bar. https://jsfiddle.net/berber5/p03uhub8/

index.html :

<html lang="fr" ng-app="activity" id="ng-app">    
    <div  ng-controller="mainCtrl">
        <navigation-bar datas ="data"> </navigation-bar>
    </div>
</html>

My directive :

app.directive('navigationBar', ['$window', function ($window) {

        return {
            restrict: 'EA',
            template: "<div id='navigation' class='navigation'>"+
                "<ul id='navidationUl' name='navigationName'> "+
                    "<li id='navLi' ng-repeat='(key, value) in datas'>"+
                        "<a  ng-href='{{value.route}}' ng-click='toggle($index)'> {{value.libelle}} "+
                            "<span ng-if='value.subMenu.length > 0' class='caret'></span>"+
                        "</a> "+
                        "<ul  id ='subMenu' ng-show ='value.showMe && value.subMenu.length > 0'>"+
                            "<li ng-repeat='(key2, value2) in value.subMenu'>"+
                                "<a ng-href='{{value2.route}}' ng-click ='dismissAll()'>{{value2.libelle}}</a>"+
                            "</li>"+
                        "</ul>"+

                    "</li> "+
                "</ul>"+
            "</div>",
            scope: {
                datas : "=datas"
            },
            link: function (scope, elem, attrs) {
                console.log("LINK : ", scope, elem, attrs);
                scope.dismissAll = function (){
                    for(var i = 0; i< scope.datas.length; i++) {
                        scope.datas[i].showMe = false;
                    }
                }
                scope.toggle = function toggle(index){
                    scope.datas[index].showMe = !scope.datas[index].showMe;
                    for(var i = 0; i< scope.datas.length; i++) {
                        if (i !=index) {
                            scope.datas[i].showMe = false;
                        }
                    }
                };
            }
        };
}]);

I seek how to hide the sub-menu if the user clicks outside of the navigation bar

Answer 1

You need add a global event click to hide all menu as this :

app.directive('navigationBar', ['$window', '$document', function ($window, $document) {

    return {
        restrict: 'EA',
        template: "<div id='navigation' class='navigation'>"+
            "<ul id='navidationUl' name='navigationName'> "+
                "<li id='navLi' ng-repeat='(key, value) in datas'>"+
                    "<a  ng-href='{{value.route}}' ng-click='toggle($index)'> {{value.libelle}} "+
                        "<span ng-if='value.subMenu.length > 0' class='caret'></span>"+
                    "</a> "+
                    "<ul  id ='subMenu' ng-show ='value.showMe && value.subMenu.length > 0'>"+
                        "<li ng-repeat='(key2, value2) in value.subMenu'>"+
                            "<a ng-href='{{value2.route}}' ng-click ='dismissAll()'>{{value2.libelle}}</a>"+
                        "</li>"+
                    "</ul>"+

                "</li> "+
            "</ul>"+
        "</div>",
        scope: {
            datas : "=datas"
        },
        link: function (scope, elem, attrs) {
            scope.dismissAll = function (){
                for(var i = 0; i< scope.datas.length; i++) {
                    scope.datas[i].showMe = false;
                }
            }
            scope.toggle = function toggle(index){
                scope.datas[index].showMe = !scope.datas[index].showMe;
                for(var i = 0; i< scope.datas.length; i++) {
                    if (i !=index) {
                        scope.datas[i].showMe = false;
                    }
                }
            };

            elem.bind('click', function(e) {
                // this part keeps it from firing the click on the document.
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(scope.dismissAll);
            })
        }
    };
}]);

More information here : Angular Click outside of an element event

How to hide submenu on click outside of navigation bar

Question

1 answers

solution1
1 ACCPTED 2015-04-03 08:11:42

How to hide submenu on click outside of navigation bar

Question

1 answers

solution1 1 ACCPTED 2015-04-03 08:11:42

solution1
1 ACCPTED 2015-04-03 08:11:42