Tab only on condition?


#1

Does anyone have any idea on how to implement a tab to show only under certain conditions?

For example, on first boot I would like to offer the user a “configuration” tab, but once configuration has been set, then I don’t want the tab to show anymore.

I’ve taken a stock tabs demo and added this to tabs.html which MOSTLY seems to work…

<* ion-tab title="Configuration" ng-if="settings.debugMode" icon-off="ion-ios-locked-outline" icon-on="ion-ios-unlocked-outline" href="#/view/config"> <*ion-nav-view name="view-config"><*/ion-nav-view> <*/ion-tab>

view-config is literally the previous tab-account tab, but the slider sets $rootScope.debugMode.

The expectation was that once the slider was slid then the tab would disappear.
That is exactly what happens the Configuration tab itself does disappear, but the content remains. Furthermore clicking any other tab (while slider is slid), results in nothing occuring.

There is nothing in the console.

Here’s the strangest thing. If I leave the window and come back a few minutes later, the dashboard view does in fact come back. But if I leave the window open and just watch it then nothing at all occurs.

Is this a bug? Or is there a better way to implement a conditional tab?
Thanks!


#2

simple --> set a flag if user is new in the app --> redirect to a special view with both tabs and as a regular user you are using the standard state :wink:

do not try to build hacky workarounds to hide and view elements like tabs


#3

Sorry, can you please explain it like I’m 5?
I had assumed that the ng-if conditional to show / hide the tab was exactly what you’re describing.


#4

yeah but the ion-tabs and other directives are playing together with other components of the framework, which does not work if you hide and show or ng-if stuff.

so your user gets logged in the first time --> you know it because in your localstorage or at the user object in your backend is not a flag set like “firstStart = true”.

if the user has not opened the app before --> redirect the user to a special state with all tabs.
if the user has the flag --> show the ordinary state without this one tab


#5

Ok I understand that, but how would I create a second “special” state like that given that I’m starting from the default “tabs” template?
I mean where would I even start?
It seems to me that tabs just completely takes over the $state


#6

okay i do not know how your app works but i think of something like that:

  1. first app start
  2. user logged in
    3a. flag not found --> show the state with all tabs
    3b. flag found --> show ordinary state

it depends how your navigation structure in your app works.


#7

My app works EXACTLY like the tabs template since that’s all it is.
The only difference is that ng-if conditional and that the “tab-account” was renamed “view-config”. The slider there sets $rootScope.settings.debugMode directly, whereas in the default template it sets “$scope.settings.enableFriends”

Other than those very minor changes the app is identical.

I think the problem is that $state appears to be completely bound to the tabs.
I’m not seeing a way to create or invoke a state that isn’t inside of tabs.html 's

<*ion-tabs class="tabs-icon-top tabs-color-active-positive">

If I place the ion-nav-view anywhere else it never shows. This is true even if I do a $scope.go right from the DashCtrl

Since DashCtrl is the first controller loaded, that was something I already tried.
One thing I haven’t tried is to create a wholly new controller, but the way the docs are worded the ion-nav-view should be able to placed inside of any ion-view.

Can someone try to work up a functional way of having content that isn’t inside the ion-tab or does all state HAVE to be inside of ion-tab if any content is there?


#8

another question :smile:
maybe you should use for the settings a little modal after first app start, so the user have to make the settings there and after that the modal gets closed?

it would be another approach to reach you aim :wink:


#9

Yes that’s possible too. Just changes the layout of the app a bit, but heck if it works.


#10

In the end I just decided that neither tabs nor ui-routing gives me anything worth the headache of dealing with these kinds of issues.

I ended up just using directives and wrapping them in ng-show and basically rolling my own version of $state, but at least it works and it took a lot less time to write from scratch than trying to track down and debug that problem did.