Tabs and ng-include?

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

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

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?

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


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

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

   <!--Your Template Content Goes here-->

This structure works like a charm for me.

1 Like

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"/>