Ion-Tabs Stop Working When Over-Used?

ionic-v1
1

Hi,

I’ve been working on a tab project and noticed that after so much switching between tabs they stop working completely.

For example I have three tabs which work fine to start but the more I click between them the more strange they become. The tab icon eventually won’t highlight when I click a new tab and the content stops changing between them.

My code is rather simple:

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state("secure", {
        url: "/secure",
        templateUrl: "templates/secure.html"
    })
    .state("secure.service", {
        url: "/service",
        views: {
            "secure-content": {
                templateUrl: "templates/service_tabs.html"
            }
        }
    })
    .state("secure.account", {
        url: "/account",
        views: {
            "secure-content": {
                templateUrl: "templates/account_settings.html"
            }
        }
    })
    .state("secure.service.tabs", {
        url: "/tabs",
        views: {
            "viral": {
                templateUrl: "templates/tabs_viral.html",
                controller: "TabsController"
            },
            "albums": {
                templateUrl: "templates/tabs_albums.html",
                controller: "TabsController"
            },
            "messages": {
                templateUrl: "templates/tabs_messages.html",
                controller: "TabsController"
            }
        }
    });
    $urlRouterProvider.otherwise('/secure/service/tabs');
});

Above is my $state config, and here is the code that appears in my secure.service state:

<ion-view>
<ion-tabs class="tabs-dark tabs-icon-only">
    <ion-tab title="Stream" icon-on="ion-ios-pulse-strong" icon-off="ion-ios-pulse-strong">
        <ion-nav-view name="viral"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Albums" icon-on="ion-person" icon-off="ion-person">
        <ion-nav-view name="albums"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Messages" icon-on="ion-chatbox" icon-off="ion-chatbox">
        <ion-nav-view name="messages"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</ion-view>

I apologize if the formatting got wonky when I pasted it in.

In addition to the tab switching failing, the titles also fail. After I’ve navigated through all three tabs, the title remains as whatever the third tab switched was.

Trying to figure out if this is an AngularJS issue, Ionic, or maybe just me.

Any input appreciated.

Thanks,

2

I have similar issue.
I have same tab setup as you with additional menuitems in side bar. Both tab and menuitem can switch the states. But for some reason they sometimes switch over tabs only if i first click menuitem else they stay empty. Title and nav icon also messing up while switching between tabs…

3

I have semi-similar issue in 1.0 RC where I can only navigate to each tab’s page once. When I click away and try and go back, the url location and browser title changes correctly, but the content does not switch. My guess is this is an issue with caching for my problem, but I haven’t dug into how.

4

I suffer from that problem too, but I think it is a different issue and may or may not be a bug. I too haven’t dug too deep into it.

In any case, here is my full code for this problem:

I was going to put it on CodePen, but CodePen kept crashing all my web browsers. @mhartington said he was going to take a look in the next few days.

If you think you can figure out my issue (Ionic bug or user bug), I’d be happy to hear your two cents.

Thanks,

5

I think it’s your structure that’s causing the issues you were experiencing.

First of all, if you want a page with tabs, there should be an abstract page that will hold the tabs. ie. There should be an abstract state secure.service as example which would hold then house the tabs.

Also unwrap <ion-view> from the tab parent or container.

These are how I personally feel; I don’t know if there’s any technical backing to your structure or mine. But that’s how I learnt.

6

Hi @peterrobot

I might know what you’re talking about. Would you be willing to add a snippet to this thread based on my code? I want to make sure I fully understand before I go adventuring.

You’d definitely be doing a lot of people a favor.

Thanks,

7

Ok. I’ll create a mockup later in the day. I hope I do not forget.

8

Hey @peterrobot i guess you forgot… self-fulfilling prophecy :smiley:

@nicraboy did you solve issue or have a correct html for this??

9

I have not had time to revisit it, but my full code is on GitHub:

If you want to run it, you’ll have to have an Imgur account. Otherwise, find everything in the app.js file and template files.

Thanks,

10

@nicraboy, Sorry. I have been sooo busy with work, I have not even logged in to ionic forum since then. However, I’m testing the fork from github now. I’ll get back to you in a moment.
I’m less busy now.

11

@nicraboy, how do I authenticate in the app? I mean where do I enter my imgur account details. Login button says “Cannot authenticate via a web browser”

12

The tabs actually behave normally unless I’ve not erred on them yet. So what was your complaint before? It seems to have been resolved because there is now an secure.tabs abstract state, which holds the three tabs.

13

Yea, I’ve added a sort-of fix thanks to the help of @mhartington.

The only problem that exists now is that there is a flicker between navigating tabs for reasons I assume to be because I am changing the state on every tab change.

The app cannot be tested in a web browser, but if you compile to device or simulator, just enter your credentials and it will work fine.

Thanks for checking back :slight_smile: