Beta 1.0: multiple tab-bar mix content

[nicolasca]

I have one tab bar in my main content (tab bar 1), and one tab bar into my right side menu (tab bar 2). This always worked since the last release

• I have weather information into tab Weather of tab bar 1
• I click on Blocks tab of tab bar 1

What is happening now: the content of my weather tab of tab bar 1 has moved into the content on my first tab of tab bar 2 in the side menu

Am i missing something (forgot to give id, new option tag)? I checked the documentation, but i cannot figure out what the problem is.

[nicolasca]

Hi,

the issue is still there in the beta.
I made research in the forum, and I found this post

Bug in TabBar with nested states?

Hello guys, I think I’ve found a little but annoying bug when using nested states in tab subviews… If I use a nested state in the first tab, it works perfectly, reloads well and if it’s the default route it runs well. But if I try to use a nested state in the second tab, it doesn’t load if it’s the initial url or if I reload it (it’s the same), it only works if I navigate to another tab and then back to it. In my app I have a main abstract state for the tabs, as in the starter project: .state…

It explains there is a problem with the second tab (and not the first one) when using a nested state (which is my case).
No one has experienced this problem since the version 0.9.26?

[nicolasca]

I continued to analyse the problem. I put some logs into ionTabs and ionTab directives.
At initialization, everything works fine. Every single directive ionTab is associated with the right scope.

Then I click on “Blocks” tab. The right tab is selected (through the select method of ionicTabs controller with tab.$tabSelected = true; )

Inside ionTab the following code is fired

$scope.$watch('$tabSelected', function(value) {
          childScope && childScope.$destroy();
          childScope = null;
          childElement && $animate.leave(childElement);
          childElement = null;

          if (value) {
            childScope = $scope.$new();
            childElement = tabContent.clone();
            $animate.enter(childElement, tabsCtrl.$element);
            $compile(childElement)(childScope);
          }
        });

I logged some variable. And i can see that I have the proper $tabSelected and tabContent.
But here is the problem: tabsCtrl is not the one I want. It is the one from tab bar 2 with its scope and the $element. Thats why the content of tab bar 1 go to tab bar 2
And I can tell it was OK when the directive was initialized, and I cannot see why this has changed.

So maybe I am missing something about angular js behaviour.
Any idea?