Tab state problem

[dotcom9]

I have an app with dynamically added tabs. The first tab also has nested subtabs. (See plunk at: http://plnkr.co/edit/exWWrggIY6hjn2EnZVW1?p=preview). I need to be able to maintain tab / subtab state even when the user returns after navigating away to a different application url (and controller). So I maintain the tab state in a service. So far so good.

However, I notice that if I select a subtab other than the first one, then add a new tab, on returning to the first tab, the subtab selection has been lost. This only happens the first time: if I reselect the subtab then click on the new main tab again, on returning, the correct subtab is still selected.

Can anyone tell me how to fix or work around this please?

To reproduce:

1. Refresh plunker
2. Click subtab 2
3. Click Add Tab button
4. Click Tab 1
5. Observe

Expected Results

• Subtab 2 is active

Actual Results

• Subtab 1 is active

[hallister]

Before we get into the issue of whether or not this is a tabs, what is your use case for this? The behavior of your demo is odd... each time Tab1 is clicked a new scope is generated for all existing tabs, due to the dynamic tabs having a different location.$path.

Ignoring that, I can't imagine how tabs itself could be responsible for this. You are storing the tab state in a service, and that seems to be the issue. That's more evident by the fact that it does work after you keep tabbing back and forth after the first time.

[dotcom9]

Hi Justin, thanks for your reply. Giving the dynamic tabs a different url enables us to provide deep links into the application when required; implementing the dynamic tab functionality in a separate controller is an appropriate separation of responsibilities for the app. The reason for the service is precisely to maintain tab state across diverse urls.

Is it the change of url that regenerates the scopes, or the fact that controllers are torn down? I agree the regeneration of the scopes seems strange.

However, if you uncomment the alert() statement in the last line of the controller and run the test scenario again, you might see a bit more clearly what is going on. The subtab fires the select() method as expected when initialising and clicking on Subtab 2. But when you click the Add Tab button, it fires the method three times. Once on the scope of each subtab on the new dynamic tab (even though that tab doesn't have subtabs!), then once again for the original tab, but activating SubTab1 rather than SubTab2 as expected.

That doesn't seem like expected behaviour to me ... ?

[hallister]

Hmmm... seems odd and makes me wonder if it's related to the dynamic tabs issue in #783... I'm just not familiar enough with the tabs implementation to give you a direct answer so I'll wait for @ajoslin to take a look at it.

[dotcom9]

Discovered that the multiple scope instances are due to using the ng-view directive to load the tab content. But more importantly, multiple controllers are being spun up because $routeProvider is configured (unnecessarily) with the Controller option in app.js. Changing that solves the problem.

Thanks.

[dotcom9]

Looking at it again, the above is only part of the problem. After changing the route configuration, the select() method is always fired on the same scope, but it still gets fired three times, and continues to lose the state of the active tab. Have reopened the issue.

See this updated plunker: http://plnkr.co/edit/lGJ41UvlqBAhOA6fHiyy?p=preview

[ajoslin]

Sorry for slowness - checking this now.

All I can say is .. Yikes, ng-view inside a tab! Looking ...

[ajoslin]

Fixed in 0.6.0 http://plnkr.co/edit/1KAlK0R14BF1cbOZ1WEL?p=preview :-)