Two Tab Directives, One View

Let’s say I have a view. for posterities sake it has a google maps element on it. I have an initial set of tabs that handles the basic navigation of the map. But when i click on a marker. I have a click handler set to update a rootScope containing the information of the active marker. I’ve been trying to get the intital set of tabs to hide. and the second directive of tabs to show which contains controls necessary to manipulate said marker.

As of right now I have a function that returns true or false whether or not the activeMarker is currently filled or not. this allows the initial set of tabs to load, but won’t hide or show this set of tabs or the second tab directive.

I’m using ng-show on the tab directives and have them both in the controller template on top of each other. If i change the values to true and false respectively the tab bars switch. But to dynamically hide and show the multiple bars without reloading the state and losing the current status of the map at hand is baffling me. Any input is welcome.

Mainly i’m asking if this is theoretically possible within angular concepts. I’m sure it is I just happen to be slightly off path. I feel like I’m on to something with this current implementation and maybe am missing one or two key things to allow the scopes to work ideally.

thanks for your assistance i really appreciate it!

Can you upload a CodePen of what you have so far?

Alright, I did my best to simplify it down as best I could. It’s not my exact scenario but the logic is the same for the most part. I have the 2 tab directives with a toggle function that checks if the active variable is on or not. Here’s the codepen. Thank you!

Here’s a fixed version :smile: http://codepen.io/anon/pen/xbjOdO

You don’t need to call a function to return true or false when you get get it directly with the ! expression (! means not, so if $scope.isActive = true and you did ng-show="!isActive" it would not show because it would evaluate to false. For whatever reason it does not look like you have to wrap stuff for ng-show inside of your standard {{}}

1 Like

Wow, that’s incredibly nifty and exactly the simple implementation i thought it would be. Thank you oh so much ^.^