I am looking to create a directive that will generate a navigation bar. Check out my code on JSFiddle here.
Here is the code snippet from index.html :
<html lang="fr" ng-app="activity" id="ng-app">
<div ng-controller="mainCtrl">
<navigation-bar datas ="data"> </navigation-bar>
</div>
</html>
This is the directive I have created:
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 am trying to figure out how to hide the sub-menu when the user clicks outside of the navigation bar.