Conditional header buttons with ion-tabs

1

Hello,

I have a view with two tabs: A and B. I want that view to have a header button only if I’m on tab A and the scope variable “showButton” is set to true (done in tab A controller). The problem I’m facing is that I don’t seem to have access to that scope variable from outside the tabs.

I have 3 html files: index.html (to setup tabs), A.html (for tab A) and B.html (for tab B). This is the content of index.html:

<ion-view view-title="Tabs">
    <ion-nav-buttons side="secondary">
        <button ng-if="showButton" class="button button-icon icon ion-person"></button>
    </ion-nav-buttons>
    <ion-tabs class="tabs-icon-top">
        <ion-tab title="A" icon="ion-chatbox">
            <ion-pane ng-controller="tabACtrl">
                <ng-include src="'A.html'"></ng-include>
            </ion-pane>
        </ion-tab>
        <ion-tab title="B" icon="ion-person-stalker">
            <ion-pane ng-controller="tabBCtrl">
                <ng-include src="'B.html'"></ng-include>
            </ion-pane>
        </ion-tab>
    </ion-tabs>
</ion-view>

A.html and B.html are like this:

<ion-content class="has-tabs">
    <ion-list>
        ...
    </ion-list>
</ion-content>

The tab state is defined like this:

.state('tabs', {
    url: '/tabs',
    views: {
        'content': {
            templateUrl: 'index.html'
        }
    }
})

Even if I set $scope.showButton to true from tabACtrl the button is not shown. Adding that button to A.html doesn’t work either.

What’s the best way to achieve this? What I thought is adding a controller for index.html and then using $scope.broadcast or something to tell it that it should show/hide the button, but I’m not sure if it’s the best approach.

Thanks!