Tabs and ng-include?

1

Hello everyone,

I have a situation where I am using ion-tabs and don’t want to keep all the code for each of the tab’s views in the same file. Therefore, I created a file for each of those views and used ng-include, like so:

<ion-tabs>
  <ion-tab title="A">
    <div ng-include src="'/templates/campaign/a.html'"></div>
  </ion-tab>
  <ion-tab title="U">
    <div ng-include src="'/templates/campaign/u.html'"></div>
  </ion-tab>
  <ion-tab title="Q">
    <div ng-include src="'/templates/campaign/q.html'"></div>
  </ion-tab>
  <ion-tab title="I">
    <div ng-include src="'/templates/campaign/i.html'"></div>
  </ion-tab>
</ion-tabs>

This works fine when testing in the browser, but when I test in android I get a blank screen with the tabs in the bottom. Does anyone have any ideas around these?

1 Like
2

I’m having the same problem, but in Chrome as well - other content inside my ion-tab works fine, and Angular is replacing the ng-include element with a comment, but watching the sources and traffic, my template isn’t getting requested–no 404s or anything. Halp?

3

I had the same problem and solved it by remove first slash: ‘/templates/campaign/a.html’ => ‘templates/campaign/a.html’

3 Likes
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
5

Remember you have to you quote the url of the template like so

<div ng-include="'/templates/tab1'"/> or    <div src="'/templates/tab1'"/> not <div ng-include="/templates/tab1"/>