After browsing some Stacks, I've come to the realization that I need to create separate directives in order to hide or toggle a menu from its sub-menu items.
I want the menu to be hidden when any of the sub-menu items are clicked.
However, I can't help but feel there must be a simpler way. Does anyone know if such a solution exists?
Currently, my code is designed to list items that generate tabs with assigned values. When a sub-menu item is selected, it hides all tabs except for the one corresponding to the selected value. This allows for a seamless transition without any page reloads or passed parameters.
<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
<li><a id="Home" ng-click="navi.selectTab(1)">Home</a></li>
<li><a id="About" ng-click="navi.selectTab(2)">About</a></li>
<li><a id="Contact" ng-click="navi.selectTab(3)">Contact</a></li>
</ul>
...<div ng-show="navi.isSelected(1)">...
...<div ng-show="navi.isSelected(2)">...
...<div ng-show="navi.isSelected(3)">...
I'm in search of a quick and simple solution. You can find a function prototype attached with a plunkr link: HERE
Keep in mind, this is just a prototype. The final version will be more polished. Right now, I'm just looking for advice on functionality.