So I've read through a few Stacks and am finding that I must create separate directives to hide/toggle a menu from it's sub-menu items.
I want the menu to HIDE when ANY of the sub-menu items are clicked.
But I feel like there has to be an easier way and am wondering if anyone knows if there is or not?
As of right now, I have my code set to list items that create tabs with values assigned to them. When a sub-menu item is selected, it hides all the tabs EXCEPT for the selected tab value. This way there is no page reload and no parameters being passed.
<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 hoping for a quick fix. I've attached a function prototype with plunkr: HERE
Again, this is just a prototype. The final version will be fancied up. I'm just looking for functionality advice.