Ng-include in tabs

ionic-v1
1

Hi, I have problem making the tabs switch content when the tab content itself is ng-included like below:

<ion-tabs class="tabs-positive tabs-icon-top">

  <ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
    <div ng-include="'components/test/home.html'"></div>
  </ion-tab>

  <ion-tab title="Contact" icon-on="ion-ios-person" icon-off="ion-ios-person-outline">
    <div ng-include="'components/test/contact.html'"></div>
  </ion-tab>

</ion-tabs>

What on the other hand works perfectly fine is doing this:

  <ion-tab title="Info" icon-on="ion-ios-information" icon-off="ion-ios-information-outline">
    <ion-view>
      <ion-content padding="true">
        <h2>Tab 1 Content</h2>
      </ion-content>
    </ion-view>
  </ion-tab>

  <ion-tab title="Logg" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <ion-view>
      <ion-content padding="true">
        <h2>Tab 2 Content</h2>
      </ion-content>
    </ion-view>
  </ion-tab>

</ion-tabs>

But I don’t want to include everything in the same HTML file. Any ideas of what I’m doing wrong?

2

You can do something like that

tabs.html

<ion-tabs class="tabs-icon-top">
    <ion-tab title="Tab 1" icon="ion-star" ui-sref="home.tab1">
        <ion-nav-view name="tab-1"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Tab 2" icon="ion-coffee" ui-sref="home.tab2">
        <ion-nav-view name="tab-2"></ion-nav-view>
    </ion-tab>
</ion-tabs>

config.js

yourApp.config(function ($stateProvider) {
    $stateProvider
        .state('home', {
            abstract: true,
            url: "/home",
            templateUrl: "tabs.html",
        })
        .state('home.tab1', {
            url: "/tab1",
            views: {
                "tab-1": {
                    templateUrl: "tab1.html",
                    controller: 'Tab1Ctrl'
                }
            }
        })
        .state('home.tab2', {
            url: "/tab2",
            views: {
                "tab-1": {
                    templateUrl: "tab2.html",
                    controller: 'Tab2Ctrl'
                }
            }
        });
});

tab1.html

<ion-view>
    <ion-content padding="true">
        <h2>Tab 1 Content</h2>
    </ion-content>
</ion-view>

tab2.html

<ion-view>
    <ion-content padding="true">
        <h2>Tab 2 Content</h2>
    </ion-content>
</ion-view>
3

I have seen example likes that and they work fine when your main view just contains tabs. The situation I’m in is more like this:

http://codepen.io/anon/pen/LVYYMo (Found a codepen and slightly modified it to match my scenario)

  • Sign in
  • Press on the sidemenu and choose list
  • Select an item on the list

The view here has 3 tabs and I can’t get this to work with substates like you suggested. Tab 1 is loaded but not anything else and I’m also loosing the back button and title. Any thoughts?