Tabs and ng-include?

4

My Environment
Cordova CLI: 5.0.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: 1.5.0

I solved the issue by having <div ng-include...> inside <ionic-view> within <ionic-tab>. Here is the structure you may have to try

<ion-pane>
        <ion-tabs class="tabs-color-assertive tabs-icon-top">
            <ion-tab title="Tab 1"...>
                <ion-view>
                    <div ng-include src="'templates/tab1.html'"></div>
                </ion-view>
            </ion-tab>
            <ion-tab title="Tab 2"... >
                <ion-view>
                    <div ng-include src="'templates/tab2.html'"></div>
                </ion-view>
            </ion-tab>
        </ion-tabs>
    </ion-pane>

I encapsulated the templates (tab1.html…) within <ion-content>
templates/tab1.html

<ion-content>
   <!--Your Template Content Goes here-->
</ion-content>

This structure works like a charm for me.

1 Like